CSS3 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 🔗
  • 语法

    1
    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 🔗
  • 语法

    1
    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 像素。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <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>
    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.

3、rotate() 旋转

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

  • rotate 值(30deg)元素顺时针旋转 30 度。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <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>
    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、scale() 缩放

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

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <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>
    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.

5、skew() 倾斜

  • 语法

    1
    transform: skew(<angle> [,<angle>]);
  • 包含两个参数值,分别表示 X 轴和 Y 轴倾斜的角度,如果第二个参数为空,则默认为 0,参数为负表示向相反方向倾斜。

    • skewX(); 表示只在 X 轴 (水平方向) 倾斜。
    • skewY(); 表示只在 Y 轴 (垂直方向) 倾斜。
  • skew(30deg,20deg) 元素在 X 轴和 Y 轴上倾斜 20 度 30 度。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <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>
    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.

6、matrix()

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

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

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <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>
    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.

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- 前的数字为支持该前缀属性的第一个浏览器版本号。
文章目录
  1. 1. 前言
  2. 2. 1、转换方法
    1. 2.1. 1.1 transform
    2. 2.2. 1.2 transform-origin
  3. 3. 2、translate() 平移
  4. 4. 3、rotate() 旋转
  5. 5. 4、scale() 缩放
  6. 6. 5、skew() 倾斜
  7. 7. 6、matrix()
  8. 8. 7、浏览器支持
隐藏目录