CSS3 3D转换 - 创建空间立体效果

最后编辑于2025-04-14 12:11:43.4819807 +0800 CST

CSS3 3D 转换 ¶

CSS3 3D转换允许你在三维空间中操作元素，创建更具深度和空间感的视觉效果。

浏览器支持 ¶

下表显示了主要浏览器对 CSS3 3D 转换的支持情况：

属性	Chrome	IE	Firefox	Safari	Opera
3D Transform	12.0 1.0 -webkit-	10.0	10.0 4.0 -moz-	4.0 3.1 -webkit-	15.0 11.0 -o-

CSS3 3D转换方法 ¶

CSS3提供了多种3D转换方法，主要包括：

rotateX() - 沿X轴旋转元素
rotateY() - 沿Y轴旋转元素
rotateZ() - 沿Z轴旋转元素
translate3d() - 3D平移
scale3d() - 3D缩放
perspective() - 设置透视视图

CSS3 透视效果 ¶

要在网页中创建3D效果，必须先定义透视效果。透视效果可以让用户感知元素在3D空间中的距离。

perspective 属性定义了3D元素距离视图的距离，以像素为单位。

css

1#div1 {
2    perspective: 100px;
3}

该值越小，你离3D元素就越近，效果越明显；值越大，效果越小。

对于一组3D元素，透视属性应该添加到父元素上：

css

1.container {
2    perspective: 1000px;
3}

rotateX() 方法 ¶

rotateX()方法使元素围绕其X轴旋转给定的角度。

css

1div {
2    transform: rotateX(120deg);
3    -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
4}

rotateX示意图

rotateY() 方法 ¶

rotateY()方法使元素围绕其Y轴旋转给定的角度。

css

1div {
2    transform: rotateY(130deg);
3    -webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
4}

rotateY示意图

rotateZ() 方法 ¶

rotateZ()方法使元素围绕其Z轴旋转给定的角度，效果类似于2D rotate()方法。

css

1div {
2    transform: rotateZ(90deg);
3    -webkit-transform: rotateZ(90deg); /* Safari 和 Chrome */
4}

translate3d() 方法 ¶

translate3d()方法将元素向X、Y和Z三个方向移动。

css

1div {
2    transform: translate3d(50px, 100px, 200px);
3    -webkit-transform: translate3d(50px, 100px, 200px); /* Safari 和 Chrome */
4}

你也可以单独使用translateZ()方法来只在Z轴上移动：

css

1div {
2    transform: translateZ(100px);
3}

scale3d() 方法 ¶

scale3d()方法可以在X、Y和Z三个方向上缩放元素。

css

1div {
2    transform: scale3d(2, 3, 2);
3    -webkit-transform: scale3d(2, 3, 2); /* Safari 和 Chrome */
4}

transform-style 属性 ¶

transform-style属性指定嵌套元素是否在3D空间中呈现。

css

1div {
2    transform-style: preserve-3d;
3    -webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
4}

该属性有两个值：

flat - 所有子元素在2D平面呈现（默认值）
preserve-3d - 所有子元素在3D空间中呈现

backface-visibility 属性 ¶

backface-visibility属性定义当元素不面向屏幕时是否可见。

对于一些3D效果，如翻牌效果，这个属性非常有用：

css

1div {
2    backface-visibility: hidden;
3    -webkit-backface-visibility: hidden; /* Safari 和 Chrome */
4}