（1）旋转函数。

知识点

rotate()
rotateX()
rotateY()

在 CSS3 中，使用 rotate 函数能够让指定的元素对象绕原点旋转，主要在二维空间内进行操作。

其语法格式如下所示：

transform: rotate(角度); /*元素按照指定角度旋转*/

这里的角度可以是正值也可以是负值。正负值意味着什么呢？

同学们可能已经猜到了，正负值意味着不同的旋转方向，规定参数为正时，顺时针旋转；参数为负时，逆时针旋转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:50px;
            height:50px;
            margin:20px;
            display:inline-block;
            background-color:chartreuse;
        }
        .c1{
            background-color:#ffe6e6;
            transform:rotate(60deg); /*右旋60°*/
        }
        .c2{
            background-color:#a7c5eb;
            transform:rotate(-60deg);/*左旋60°*/
        }

    </style>
</head>
<body>
    <div class="c1"></div>
    <div></div>
    <div class="c2"></div>
</body>
</html>

rotateX 让指定元素围绕横坐标（X 轴）旋转。其使用格式如下所示：

transform: rotateX(角度);

rotateY 让指定元素围绕纵坐标（Y 轴）旋转。其实用格式如下所示：

transform: rotateY(角度);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .c1 {
        transform: rotateX(70deg);
      }
      .c2 {
        transform: rotateX(180deg);
      }
      .c3 {
        transform: rotateY(45deg);
      }
      .c4 {
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c1"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c2"
      />
    </div>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c3"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c4"
      />
    </div>
  </body>
</html>

沿 X 轴旋转 180deg 的过程如下所示：

沿 Y 轴旋转 180deg 的过程如下所示：

rotate 函数：让指定的元素绕原点旋转。
rotateX 函数：让指定的元素绕 X 轴旋转。
rotateY 函数：让指定的元素绕 Y 轴旋转。

（2）移动函数。

知识点

translate()
translateX()
translateY()

translate() 函数能够重新定位元素坐标，该函数包含两个参数值，分别用来定位 X 轴和 Y 轴的新坐标。

其语法格式为：

transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:50px;
            height:50px;
            background-color:#dfabff
        }
        .c1{
            background-color: #844e4e;
            transform: translateX(20px);
        }
        .c2{
            background-color:#985454;
            transform:translateY(20px);
        }
    </style>
</head>
<body>
    <div></div>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>

页面上有两个 div 元素块，使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素；使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。

使用 translateX 函数时如果为正值则向右移动，反之向左移动；使用 translateY 函数时如果为正值则向下移动，反之向上移动。

（3）缩放函数。

知识点

scale()
scaleX()
scaleY()

scale() 函数能够缩放元素大小，该函数包含两个参数，分别用来定义宽和高的缩放比例。

其语法格式为：

transform: scale(缩放倍数); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放倍数); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放倍数); /*元素按照指定值沿着 Y 轴缩放*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 30px;
      }
      .c1 {
        background-color: rgba(179, 153, 38, 0.651);
      }
      /*沿着 X 和 Y 轴进行缩放*/
      .c2 {
        background-color: #9088d4;
        transform: scale(2);
      }
      /*沿着 X 轴进行缩放*/
      .c3 {
        background-color: #ffe5b9;
        transform: scaleX(2);
      }
      /*沿着 Y 轴进行缩放*/
      .c4 {
        background-color: #1c8181;
        transform: scaleY(2);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
  </body>
</html>

在页面上有四个 div 元素块，第一个是宽和高均为 50 个像素的正方形元素块，我们另外三个元素块在此基础上进行缩放。
第二个元素块使用 transform: scale(2) 让元素同时沿着 X 轴和 Y 轴扩大 2 倍。
第三个元素块使用 transform: scaleX(2) 让元素沿着 X 轴扩大 2 倍。
第四个元素块使用 transform: scaleY(2) 让元素沿着 Y 轴扩大 2 倍。

（4）倾斜函数。

知识点

skew()

skew() 函数能够让元素倾斜显示，该函数包括两个参数值，分别用于定义 X 轴和 Y 轴的倾斜角度。

其语法格式为：

skew(X 轴角度, Y 轴角度)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:50px;
            margin:30px;
            background-color:#9088d4;
        }
        .c2{
            background-color:rgb(35, 243, 160);
            transform:skew(50deg, 15deg);
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>

（5）矩阵变换函数。

知识点

matrix()

matrix() 是矩阵函数，调用该函数可以非常灵活的实现各种变形效果，它包括 6 个参数值，形成了一个 3×3 的矩阵。通过对矩阵值的定义来实现元素的变形效果。

其语法格式为：

matrix(<number>,<number>,<number>,<number>,<number>,<number>)

在 matrix 函数中，前面四个参数是用来描述线性变换的值，而后两个参数使用来描述应用这个线性变换的方式。

概念听起来好复杂，不要慌！我们不需要重新学一遍数学，只要记住下面这一点就可以了。matrix 的参数我们可以按照如下方式来理解：

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

参数 1 和参数 4 相当于是缩放函数；参数 2 和参数 3 相当于是倾斜函数；参数 5 和参数 6 是移动函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:100px;
        }
        .container{
            border: 1px solid rgb(186, 233, 19);
        }
        .matrix{
            background-color:#998dfe;
            transform:matrix(1, 0, 0, 1, 50, 50);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="matrix"></div>
    </div>
</body>
</html>

matrix()传入参数全部是数字，不带单位。
在上面代码中，我们有两对同样大小的 div 元素，它们是父与子的关系。
我们使用 matrix(1,0,0,1,50,50) 给子元素 div 设置其元素 X 轴和 Y 轴的缩放倍数为 1（也就是元素本来的大小）。
参数 2 和参数 3 为 0，说明没有倾斜。
参数 5 和参数 6 为 50，说明向 X 轴和 Y 轴移动 50 个像素。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Web开发学习笔记(35)——CSS3(9)2D和3D的转换

知识点

知识点

知识点

知识点

知识点