CSS 3D动画【大小可开合正方体】
以下是一个简单的HTML和CSS代码示例，展示了如何创建一个可以打开和关闭的3D正方体动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D正方体动画</title>
<style>
.container {
perspective: 1000px;
}
.cube {
width: 200px;
height: 200px;
margin: 50px auto;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
background: #000;
opacity: 0.5;
}
.cube .front { background: #ff0000; transform: translateZ(100px); }
.cube .back { background: #ffee00; transform: translateZ(-100px) rotateY(180deg); }
.cube .right { background: #00ff00; transform: translateX(100px) rotateY(90deg); }
.cube .left { background: #00ffff; transform: translateX(-100px) rotateY(-90deg); }
.cube .top { background: #ff00ff; transform: translateY(-100px) rotateX(90deg); }
.cube .bottom { background: #ffff00; transform: translateY(100px) rotateX(-90deg); }
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<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>
</div>
</body>
</html>这段代码定义了一个类名为 .cube 的3D正方体，它的每一面都有不同的背景颜色，并且应用了一个无限循环的动画，使正方体不断旋转。这个示例提供了一个简单的3D动画效果，并且可以作为开发者创建更复杂3D动画的基础。
评论已关闭