HTML5 CSS3 诱人的实例： 3D立方体旋转动画，阿里珍藏版前端框架体系架构手写文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D立方体旋转动画</title>
<style>
.cube {
width: 100px;
height: 100px;
margin: 50px auto;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube div {
position: absolute;
width: 100px;
height: 100px;
background: skyblue;
opacity: 0.8;
}
/* 定义每个面的位置 */
.cube .front { background: #f00; transform: translateZ(50px); }
.cube .back { background: #0f0; transform: translateZ(-50px); }
.cube .right { background: #00f; transform: rotateY(90deg) translateZ(50px); }
.cube .left { background: #0ff; transform: rotateY(90deg) translateZ(50px); }
.cube .top { background: #ff0; transform: rotateX(90deg) translateZ(50px); }
.cube .bottom { background: #f0f; transform: rotateX(90deg) translateZ(50px); }
</style>
</head>
<body>
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>这段代码创建了一个简单的3D立方体，通过CSS3的@keyframes动画实现了它的旋转效果。.cube定义了基本的3D转换环境，@keyframes rotate定义了从0度旋转到360度的动画，cube div设置了立方体的每个面，并通过类名定义了它们的背景色和位置。动画通过无限循环(infinite)和线性曲线(linear)来保持旋转速度一致。
评论已关闭