立方体html360旋转
时间: 2023-07-25 19:48:08 浏览: 50
您可以使用CSS3的transform属性来实现立方体的360度旋转。以下是一个简单的示例代码:
HTML代码:
```
<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 left">左面</div>
<div class="side right">右面</div>
</div>
```
CSS代码:
```
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
.side {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 32px;
color: #fff;
background-color: rgba(0, 0, 0, 0.8);
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.top {
transform: rotateX(90deg) translateZ(-100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(-100px);
}
.left {
transform: rotateY(-90deg) translateZ(-100px);
}
.right {
transform: rotateY(90deg) translateZ(-100px);
}
@keyframes rotate {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
```
您可以在浏览器中运行此代码,以查看立方体的360度旋转效果。