CSS 3D Transform 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 语法

  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 方法。

• 实例

  <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>

• 效果

  
  

  Hello. This is a DIV element.

  
  

  Hello. This is a DIV element.

  
  

3、rotateY()

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

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

• 实例

  <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>

  <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- 前的数字为支持该前缀属性的第一个浏览器版本号。