使用css写一个会旋转的立方体
时间: 2024-05-01 12:16:09 浏览: 23
可以使用CSS3的3D变换来实现一个旋转的立方体。下面是一个简单的例子:
HTML代码:
```html
<div class="cube">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face left">3</div>
<div class="face right">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
```
CSS代码:
```css
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 3s linear infinite;
}
.face {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 100px;
}
.front {
transform: translateZ(100px);
background-color: red;
}
.back {
transform: translateZ(-100px) rotateY(180deg);
background-color: blue;
}
.left {
transform: translateX(-100px) rotateY(-90deg);
background-color: green;
}
.right {
transform: translateX(100px) rotateY(90deg);
background-color: yellow;
}
.top {
transform: translateY(-100px) rotateX(90deg);
background-color: purple;
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
background-color: orange;
}
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
100% {
transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
}
}
```
解释:
- `.cube`定义了立方体的大小和3D变换,同时添加了一个旋转动画。
- `.face`定义了每个面的大小和样式。
- `.front`、`.back`、`.left`、`.right`、`.top`和`.bottom`分别表示立方体的前、后、左、右、上、下面,使用不同的3D变换来定位每个面,并且设置了不同的颜色。
- `@keyframes rotate`定义了旋转动画,从0%到100%逐渐旋转立方体。
你可以在浏览器中查看这个例子的效果。