css 3D立方体旋转
时间: 2023-10-14 14:08:29 浏览: 54
你可以使用CSS 3D转换属性来创建一个旋转的立方体。以下是一个简单的示例代码,你可以根据需要进行修改和扩展:
HTML代码:
```html
<div class="cube">
<div class="side front">前面</div>
<div class="side back">后面</div>
<div class="side right">右侧</div>
<div class="side left">左侧</div>
<div class="side top">顶部</div>
<div class="side bottom">底部</div>
</div>
```
CSS代码:
```css
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: perspective(800px);
animation: rotate 5s infinite linear;
}
.side {
position: absolute;
width: 200px;
height: 200px;
background-color: #ccc;
border: 1px solid #333;
text-align: center;
font-size: 24px;
line-height: 200px;
color: #333;
opacity: 0.9;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
```
解释:
- `transform-style: preserve-3d;` 定义子元素沿着 3D 空间的形式呈现,使得立方体的各个面可以在 3D 空间中呈现。
- `transform: perspective(800px);` 定义透视距离,使得立方体视角更真实。
- `.front`、`.back`、`.right`、`.left`、`.top` 和 `.bottom` 分别代表立方体的六个面,通过 `transform` 属性设置它们的位置和旋转。
- `@keyframes rotate` 定义一个旋转动画,使得立方体可以不停地旋转。
你可以在浏览器中查看这个示例,看看它是如何工作的。