<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#aa{
margin: 100px auto;
width: 200px;
height: 200px;
transform-style: preserve-3d;
position: relative;
transform: rotateX(-15deg) rotateY(45deg);
animation: name 6s linear 100ms infinite;
}
.bb{
position: absolute;
width: 100px;
height: 100px;
left: 0;
right: 0;
background-color: rgba(232,222,45,0.6);
}
.qian{
transform: translateZ(50px);
background-color: rgba(23,22,4,0.6);
}
.hou{
transform: translateZ(-50px);
background-color: rgba(23,122,56,0.6);
}
.zuo{
transform: rotateY(270deg) translateZ(-50px);
background-color: rgba(223,122,74,0.6);
}
.you{
transform: rotateY(270deg) translateZ(50px);
background-color: rgba(13,22,254,0.6);
}
.shang{
transform: rotateX(270deg) translateZ(-50px);
background-color: rgba(223,12,144,0.9);
}
.xia{
transform: rotateX(270deg) translateZ(50px);
background-color: rgba(23,252,144,0.6);
}
@keyframes name{
from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
</style>
</head>
<body>
<div id="aa">
<div class="bb qian"></div>
<div class="bb hou"></div>
<div class="bb zuo"></div>
<div class="bb you"></div>
<div class="bb shang"></div>
<div class="bb xia"></div>
</div>
</body>
</html>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)