正文
HTML5 纯CSS3实现正方体旋转3D效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
实现效果：
实现代码：
<!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>
<!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>
