transform-style属性用来制定元素的子元素是否在3D空间中保持3D立体效果。默认情况下，子元素也会继承父元素的3D效果，但是如果设置为flat，则会取消这种继承关系。
/* 3D立体效果 */
.container {
transform-style: preserve-3d;
}
/* 取消子元素的3D继承 */
.child {
transform-style: flat;
}perspective属性定义了3D场景的视角。它只适用于被设置为perspective的元素的子元素，在该元素上应用transform: translateZ()属性才会有3D效果。
/* 视角距离为600px */
.container {
perspective: 600px;
}
/* 在z轴上平移-200px */
.child {
transform: translateZ(-200px);
}除了基本的3D变换，CSS3还提供了rotateX()、rotateY()和rotateZ()等函数，可以在x、y、z轴上实现各种旋转效果。
/* 沿着x轴旋转45度 */
.box {
transform: rotateX(45deg);
}
/* 沿着y轴旋转60度 */
.box {
transform: rotateY(60deg);
}
/* 沿着z轴旋转90度 */
.box {
transform: rotateZ(90deg);
}除此之外，还可以使用perspective-origin属性来设置3D旋转的中心点，使用backface-visibility属性来控制元素的翻转效果可见性。
/* 中心点在元素左上角 */
.box {
perspective-origin: left top;
}
/* 不可见 */
.box {
backface-visibility: hidden;
}通过灵活运用CSS3的3D变换功能，可以让网页元素呈现出真正的3D效果，提升用户的视觉体验。但需要注意的是，在低端设备上使用大规模的3D变换可能会导致性能问题。