css3d制作正方体
要使用CSS3创建一个正方体，你需要定义每个面的样式，并使用transform属性来旋转它们以形成一个正方体。以下是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.cube {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
.side {
position: absolute;
width: 100px;
height: 100px;
background: #f0f0f0;
box-shadow: 0 0 5px #ccc;
}
/* Front face */
.front {
background: #FF5733;
transform: translateZ(50px);
}
/* Back face */
.back {
background: #33FF77;
transform: translateZ(-50px);
}
/* Top face */
.top {
background: #33FFFF;
transform: rotateX(90deg) translateZ(50px);
}
/* Bottom face */
.bottom {
background: #FF7F50;
transform: rotateX(90deg) translateZ(50px);
}
/* Right face */
.right {
background: #FFFF00;
transform: rotateY(90deg) translateZ(50px);
}
/* Left face */
.left {
background: #FFC0CB;
transform: rotateY(90deg) translateZ(50px);
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="cube">
<div class="side front"></div>
<div class="side back"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side right"></div>
<div class="side left"></div>
</div>
</body>
</html>这段代码定义了一个类名为.cube的容器，它包含6个.side类的子元素，每个子元素代表正方体的一个面。通过transform属性的不同值，我们旋转和平移这些面以形成一个动态旋转的正方体。动画rotate使正方体不断旋转。
评论已关闭