css3 3d 移动 |css如何使文字右对齐

transform-style:preserve-3d;
transform:translate3d(x, y, z) rotateX() rotateY() rotateZ();
perspective:depth;

首先，需要了解的是preserve-3d属性，这个属性能让父元素成为一种”参考系”，让子元素在其内部呈现出3D效果。为了实现这种效果，大家还需要添加一个perspective属性，它将会设置一个视点距离元素平面，用来控制元素在3D空间内的放大缩小程度。

然后，大家需要设置一个transform属性，它包含了平移、旋转等关于元素移动的所有属性。其中，translate3d属性定义了一个元素在3D空间内的位置，包括X、Y、Z三维坐标；而rotateX、rotateY、rotateZ属性则负责元素在3D空间内进行旋转。

以下是一个简单的例子，在一个盒子内旋转一个立方体：

.box{
width: 300px;
height: 300px;
margin: 50px auto;
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
}
.cube{
width: 100px;
height: 100px;
position: absolute;
transform-style: preserve-3d;
top: 100px;
left: 100px;
transform: rotateX(45deg) rotateY(45deg);
}
.cube-side{
width: 100px;
height: 100px;
position: absolute;
}
.front {
transform: translateZ(50px);
background-color: red;
}
.back {
transform: translateZ(-50px) rotateY(180deg);
background-color: blue;
}
.left {
transform: rotateY(-90deg) translateX(-50px);
background-color: yellow;
}
.right {
transform: rotateY(90deg) translateX(50px);
background-color: green;
}
.top {
transform: rotateX(-90deg) translateY(-50px);
background-color: purple;
}
.bottom {
transform: rotateX(90deg) translateY(50px);
background-color: pink;
}

请注意，在这个例子中，大家使用了多个不同的立方体面元素，每个元素有一个不同的transform属性，用来设置不同的3D位移和旋转效果，最终实现一个立方体的3D旋转效果。