CSS3 3D 转换

前言

  • CSS3 允许您使用 3D 转换来对元素进行格式化。

  • 可以使用 2D 或 3D 转换来转换元素。

属性 描述 CSS 备注 🔗
transform 适用于 2D 或 3D 转换的元素 3 🔗
transform-origin 允许更改转化元素位置 3 🔗
transform-style 规定被嵌套元素如何在 3D 空间中显示 3 🔗
perspective 规定 3D 元素的透视效果 3 🔗
perspective-origin 规定 3D 元素的底部位置 3 🔗
backface-visibility 定义元素在不面对屏幕时是否可见 3 🔗
  • 鼠标移动到以下元素上,查看 2D 和 3D 的转换效果:


    2D 转换

    3D 转换

1、转换方法

属性 描述 CSS 备注 🔗
transform 适用于 2D 或 3D 转换的元素 3 🔗
  • transform 语法

    1
    transform: none | transform-functions;
  • 属性值

transform 值 描述
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) 定义 3D 转换,使用 16 个值的 4x4 矩阵
translate3d(x, y, z) 定义 3D 转化
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值
scale3d(x, y, z) 定义 3D 缩放转换
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值
rotate3d(x, y, z, angle) 定义 3D 旋转
rotateX(angle) 定义沿 X 轴的 3D 旋转
rotateY(angle) 定义沿 Y 轴的 3D 旋转
rotateZ(angle) 定义沿 Z 轴的 3D 旋转
perspective(n) 定义 3D 转换元素的透视视图

2、rotateX()

  • rotateX() 方法,围绕其在一个给定度数 X 轴旋转的元素。

  • 注意: Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
    div {
    width: 150px;
    height: 100px;
    background-color: red;
    border: 1px solid black;
    }
    div#div2 {
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari and Chrome */
    }
    </style>
    1
        
  • 效果


    Hello. This is a DIV element.

    Hello. This is a DIV element.

3、rotateY()

  • rotateY() 方法,围绕其在一个给定度数 Y 轴旋转的元素。

  • 注意: Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY 方法。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
    div {
    width: 150px;
    height: 100px;
    background-color: red;
    border: 1px solid black;
    }
    div#div2 {
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari and Chrome */
    }
    </style>
    1
    2
    <div>Hello. This is a DIV element.</div>
    <div id="div2">Hello. This is a DIV element.</div>
  • 效果


    Hello. This is a DIV element.

    Hello. This is a DIV element.

4、浏览器支持

属性
transform 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-style 36.0
12.0 -webkit-
311.0 316.0
10.0 -moz-
34.0 -webkit- 323.0
15.0 -webkit-
perspective 36.0
12.0 -webkit-
310.0 316.0
10.0 -moz-
34.0 -webkit- 323.0
15.0 -webkit-
perspective-origin 36.0
12.0 -webkit-
310.0 316.0
10.0 -moz-
34.0 -webkit- 323.0
15.0 -webkit-
backface-visibility 36.0
12.0 -webkit-
310.0 316.0
10.0 -moz-
34.0 -webkit- 323.0
15.0 -webkit-
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
文章目录
  1. 1. 前言
  2. 2. 1、转换方法
  3. 3. 2、rotateX()
  4. 4. 3、rotateY()
  5. 5. 4、浏览器支持
隐藏目录