接下来介绍的都是 transform 的属性值，transform 属性其实就是实现一些特殊的变换，比如我要让元素旋转，让元素放大缩小，就可以直接使用 transform 来实现，transform 里面可以传入很多变换函数，比如这里的 rotate 就是旋转变换函数，给一个元素的 transform 属性设置上了变换函数之后，这个元素就会按照变换函数来让自己的样式发生改变。

rotate 的最常见用法是直接写一个旋转角度，元素就会按照这个角度顺时针旋转，例如: transform: rotate(30deg);，如下所示：

此时图像就被顺时针旋转了 30 度，rotate 函数里面需要填入一个角度值，这个角度可以用 deg 为单位，也就是我们常说的度数，也可以用 rad 表示弧度单位，也可以用 turn 表示多少圈，比如 1turn 表示的就是一圈，也就是 360deg。

很明显，这里的旋转是一个中心旋转，也就是说旋转中心就是元素的中心，这个旋转中心是可以设置的，通过 transform-origin 属性来设置，transform-origin 属性可以设置这个元素的所有变换函数的变换中心，比如旋转按照哪一个点旋转，放缩按照哪一个中心点来放缩这种。

显而易见，由于默认就是以中心点来变换的，所以 transform-origin 属性的属性值默认为 center center，我们可以自定义它。改属性传入两个值，第一个值为横坐标，第二个值为纵坐标，这两个值共同定义的点，就是那个变换中心，这两个值可以传的种类不少，可以传入像素值，百分比，也可以传入 center 这种关键字。例如我设置：transform-origin:0px 0px;，此时变换中心就是 (0,0)这个点，也就是元素的最左上角，效果如下：

此时变换中心就到了左上角，即基于元素的最左上角进行旋转。

transform-origin 属性如果传入 3 个参数，则可以设置空间上的变换中心。

transform 属性配合上 animation 属性，就可以实现很多动画效果。

@keyframes rot {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(30deg);
            }
        }

使用 animation: rot 1s alternate infinite; 之后，就可以实现如下效果的动画。

以上其实就是 rotate 函数的所有用法，可以看到以上的旋转都是在平面上的 2D 旋转，CSS 3 还允许我们进行 3D 变换，当然这就不是 rotate 函数了，而是以下四个函数 :

• rotateX()
• rotateY()
• rotateZ()
• rotate3d()

我们知道，计算机屏幕的 2 D 坐标轴是以左上角为顶点，向右为 x 的正方向，向下为 y 的正方向，那涉及到 3 D 之后，就必须引入 z 坐标，在计算机中，3 D 的 z 坐标是从屏幕里面向外面的方向为正方向的一条轴。

所以如果用 3 D 坐标来看 rotate 函数，相当于是在 XOY 平面上的一个旋转变换，z 坐标始终为 0

所有 transform 的变换其实都是基于这个 3 D 坐标轴的，如果是 2 D 变换那就是没有 z 轴的平面，而前面学到的 transform-origin 本质上设置的就是中心点的位置。

引入 3 D 坐标系后，就可以介绍上面三个属性了，rotateX() 就是按照 x 轴来旋转，rotateY() 就是按照 y 轴旋转，rotateZ() 就是按照 z 轴来旋转。我们看以下例子

我们可以看到，此时我这个盒子就像是铺在上面的一张纸一样，rotateX 相当于按照 x 轴转动的，x 轴是横着的，也就是沿着一条横向的轴为中心转动，而 rotateY 相当于按照 y 轴转动，而 y 轴是竖着的，也就是沿着一根竖轴旋转，而 rotateZ 是沿着 z 轴旋转的，而 z 轴是从屏幕内到屏幕外的一条轴，所以在我们看来，沿着 z 轴的效果类似于 rotate

这里先介绍 perspective 属性，我们知道 3 D 这个东西是有透视在里面的，也就近大远小，perspective 就可以实现这个透视效果，perspective 默认值为 none，也就是关闭透视效果，所以我们前面那几个动画虽然是 3 D，但是完全看不出是 3 D，更像是一个横坐标或者纵坐标的放缩。当我们给 perspective 设置一个像素值之后，例如 perspective:800px，相当于开启了透视效果，并且透视效果相当于人眼距离屏幕 800 像素。需要注意的是，perspective 需要设置在容器上，当我们给一个容器设置了 perspective 之后，我们就可以按照这个视角观察容器内的元素。

如果我们需要更像 3 D 效果，可以设置容器的 transform-style 为 preserve-3d，此时就是在模拟真实的 3 D 空间，多个 3 D 元素之间就会有真实的 3 D遮盖效果。

如果不设置 transform-origin，默认值为 center center，即变换的原点就在中心点，变换的坐标轴如上所示。

此时我再将 transform-origin 修改一下，设置为 transform-origin:0px 0px;，把坐标轴原点放到盒子的左上角，相当于就是如下效果：

此时我们设置了 perspective 的视角，再分别绕 x, y, z 旋转，就可以看到明显的 3 D 效果

此时有了近大远小的透视效果之后，就可以很明显感觉出立体效果，其实就相当于这么一个旋转

接下来比较复杂的就是多个变换同时作用的情况，请读者注意，旋转的永远不是图像本身，而是坐标轴，换句话说，当一个图像发生了旋转，那么其坐标轴也跟着一起旋转。

当我让图像沿着 z 轴旋转的时候，其 x 坐标和 y 坐标其实也在跟着旋转。所以其实本质上旋转的是坐标轴，而非图形本身，图形是跟着坐标轴一块儿旋转的。

从上图我们可以验证，当 rotateZ 执行之后，坐标轴就发生了变化，此时 x 轴不再是水平的，所以 rotateX 不再沿着水平方向旋转。

由于变换是随着坐标轴一起变换的，第一次变换改变了坐标轴的位置，而后面的一切变换都是基于这个已改变的位置进行变换的，所以两个变换之间并不独立，或者说，一次变换后会影响后面所有的变换，即两个变换，由于变换顺序的不同，最终可能会导致不同的效果。

如果要为一个元素应用多个 transform 变换函数，函数之间用空格隔开，而不是逗号。

接下来是最后一个旋转变换，rotate3d()，这个 rotate3d() 并不是前面三个的简写属性，这一点不要混淆。这个 rotate3d() 允许我们自己定义一个轴来旋转，前三个参数填入一个三维向量，这个三维向量就可以定义一个方向，或者说一条轴，图像就会以我们定义的这个轴为中心进行旋转，旋转的度数由最后一个参数决定。

就比如我要沿着水平向下 45 度旋转。

我就可以用向量定义出这样一个蓝色的轴，它就可以沿着这个轴进行旋转，即 rotate3d(1,1,0,45deg)

结合前面的知识，就可以实现下面的效果：


<!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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            perspective: 800px;
            transform-style: preserve-3d;
        }
        @keyframes change {
            0% {
                transform: rotateX(-45deg);
            }
            100% {
                transform: rotateX(45deg);
            }
        }
        .box {
            margin-top: 300px;
            margin-left: 300px;
            width: 400px;
            height: 266px;
            background-image: url(https://p0.ssl.qhimgs1.com/sdr/400__/t01a11f2b381258055a.jpg);
            background-repeat: no-repeat;
            animation: change 1s infinite alternate;
            transform-origin: center top;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

注意，transform 属性仅仅是视觉效果上的变化，元素的 DOM 位置并没有发生变化