css3制作正方体
使用CSS3制作正方体
通过CSS3的transform和perspective属性可以创建3D效果的正方体。以下是实现步骤和代码示例：
HTML结构
创建一个包含6个面的容器，每个面代表正方体的一个面：
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face left">Left</div>
<div class="face right">Right</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>CSS样式
设置3D空间和面的基本样式：
body {
perspective: 1000px;
margin: 0;
padding: 20px;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
.face {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background-color: rgba(255, 255, 255, 0.8);
}设置各个面的位置
通过transform将每个面旋转并移动到正确位置：
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
}添加旋转动画
通过@keyframes让正方体自动旋转：
@keyframes rotate {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}完整示例
将所有代码组合起来：
<!DOCTYPE html>
<html>
<head>
<style>
body {
perspective: 1000px;
margin: 0;
padding: 20px;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
.face {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background-color: rgba(255, 255, 255, 0.8);
}
.front { transform: translateZ(100px); }
.back { transform: translateZ(-100px) rotateY(180deg); }
.left { transform: translateX(-100px) rotateY(-90deg); }
.right { transform: translateX(100px) rotateY(90deg); }
.top { transform: translateY(-100px) rotateX(90deg); }
.bottom { transform: translateY(100px) rotateX(-90deg); }
@keyframes rotate {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
</style>
</head>
<body>
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face left">Left</div>
<div class="face right">Right</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</body>
</html>注意事项
perspective属性决定3D效果的强度，值越小效果越夸张transform-style: preserve-3d确保子元素保持3D空间关系- 正方体尺寸为200px时，每个面需要移动100px(一半距离)
- 可以通过修改
animation属性调整旋转速度和方式