CSS 2D Transform 2D转换

前言

• CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

• 转换的效果是让某个元素改变形状，大小和位置。

属性	描述	CSS	备注	🔗
transform	适用于 2D 或 3D 转换的元素	3		🔗
transform-origin	允许更改转化元素位置	3		🔗

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

• 鼠标移动到以下元素上，查看 2D 和 3D 的转换效果：

  
  

  2D 转换

  
  

  3D 转换

  
  

1、转换方法

1.1 transform

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

• 语法

  transform: none | transform-functions;

• 属性值

值	描述
matrix(n, n, n, n, n, n)	定义 2D 转换，使用六个值的矩阵
translate(x, y)	定义 2D 转换，沿着 X 和 Y 轴移动元素
translateX(n)	定义 2D 转换，沿着 X 轴移动元素
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素
scale(x, y)	定义 2D 缩放转换，改变元素的宽度和高度
scaleX(n)	定义 2D 缩放转换，改变元素的宽度
scaleY(n)	定义 2D 缩放转换，改变元素的高度
rotate(angle)	定义 2D 旋转，在参数中规定角度
skew(x-angle, y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴

1.2 transform-origin

属性	描述	CSS	备注	🔗
transform-origin	允许更改转化元素位置	3		🔗

• 语法

  transform-origin: x-axis y-axis z-axis;

• 属性值

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值：      left      center      right      length      %
y-axis	定义视图被置于 Y 轴的何处。可能的值：      top      center      bottom      length      %
z-axis	定义视图被置于 Z 轴的何处。可能的值：      length

2、translate() 平移

• translate() 方法，根据左 (X 轴) 和顶部 (Y 轴) 位置给定的参数，从当前元素位置移动。

• translate 值（150px，100px）是从左边元素移动 150 个像素，并从顶部移动 100 像素。

• 实例

  <style>
      div {
          width: 150px;
          height: 100px;
          background-color: red;
          border: 1px solid black;
      }
  
      div#div2 {
          transform: translate(150px, 100px);
          -ms-transform: translate(150px, 100px); /* IE 9 */
          -webkit-transform: translate(150px, 100px); /* 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.

  
  

3、rotate() 旋转

• rotate() 方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

• rotate 值（30deg）元素顺时针旋转 30 度。

• 实例

  <style>
      div {
          width: 150px;
          height: 100px;
          background-color: red;
          border: 1px solid black;
      }
      div#div2 {
          transform: rotate(30deg);
          -ms-transform: rotate(30deg); /* IE 9 */
          -webkit-transform: rotate(30deg); /* 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、scale() 缩放

• scale() 方法，该元素增加或减少的大小，取决于宽度（X 轴）和高度（Y 轴）的参数。

• scale2, 3）转变宽度为原来的大小的 2 倍，和其原始大小 3 倍的高度。

• 实例

  <style>
      div {
          width: 150px;
          height: 100px;
          background-color: red;
          border: 1px solid black;
      }
      div#div2 {
          margin-left: 75px;
          margin-top: 120px;
  
          transform: scale(2, 3); /* 标准语法 */
          -ms-transform: scale(2, 3); /* IE 9 */
          -webkit-transform: scale(2, 3); /* Safari */
      }
  </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.

  
  

5、skew() 倾斜

• 语法

  transform: skew(<angle> [,<angle>]);

• 包含两个参数值，分别表示 X 轴和 Y 轴倾斜的角度，如果第二个参数为空，则默认为 0，参数为负表示向相反方向倾斜。

  • skewX(); 表示只在 X 轴 (水平方向) 倾斜。
  • skewY(); 表示只在 Y 轴 (垂直方向) 倾斜。

• skew(30deg,20deg) 元素在 X 轴和 Y 轴上倾斜 20 度 30 度。

• 实例

  <style>
      div {
          width: 150px;
          height: 100px;
          background-color: red;
          border: 1px solid black;
      }
      div#div2 {
          transform: skew(30deg, 20deg);
          -ms-transform: skew(30deg, 20deg); /* IE 9 */
          -webkit-transform: skew(30deg, 20deg); /* 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.

  
  

6、matrix()

• matrix() 方法和 2D 变换方法合并成一个。

• matrix() 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

• 利用 matrix() 方法旋转 div 元素 30°

• 实例

  <style>
      div {
          width: 150px;
          height: 100px;
          background-color: red;
          border: 1px solid black;
      }
      div#div2 {
          transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
          -ms-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0); /* IE 9 */
          -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0); /* 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.

  
  

7、浏览器支持

属性
transform	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-
transform-origin (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-

• 表格中的数字表示支持该属性的第一个浏览器版本号。
• 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。