css怎样使立方体旋转 |css 文本框 居中

.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s linear infinite;
}
.cube .face {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.7;
border: 2px solid #000;
}
.cube .front {
transform: translateZ(50px);
}
.cube .back {
transform: translateZ(-50px) rotateY(180deg);
}
.cube .right {
transform: rotateY(90deg) translateZ(50px);
}
.cube .left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(50px);
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}

首先，在HTML中创建一个立方体的结构，可以使用6个div来组成每个面，然后将它们放置在一个具有transform-style属性的父元素中。

<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>

接下来，大家可以为立方体每个面指定不同的transform属性来实现3D效果，并通过animate属性来实现旋转动画。实现代码如下：

.front {
transform: translateZ(50px);
}
.back {
transform: translateZ(-50px) rotateY(180deg);
}
.right {
transform: rotateY(90deg) translateZ(50px);
}
.left {
transform: rotateY(-90deg) translateZ(50px);
}
.top {
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
transform: rotateX(-90deg) translateZ(50px);
}
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}

这样，一个带有旋转动画的3D立方体就成功实现了。