TransformCSS动态属性的开始

1、基本概念

基本概念：transform 属性向元素应用 2D 或 3D 转换；该属性允许我们对元素进行旋转、缩放、移动或倾斜。

这两点是 Transform 的概念和应用场景，重点在于 2D 和 3D 的转换，那么呢？2D 和 3D 的转换是有一定的数学基础的，为什么这么说呢？我们需要了解两个概念

第一个：透视投影

从某一点发射出去的光线，是互不平行的，然后就会有一个近大远小的效果。比如：家里的灯泡，我们把一个东西离得灯泡越近，那么它的影子就越大，离得越远，影子就越小。

与之对应的：正交投影

正交投影的投影线垂直于投影平面，里面的光线是互相平行的；比如生活中的太阳发出的光都是平行光。

CSS 的坐标系统 ：它的坐标系 是一个左手坐标系，绿色的是 x 轴的方向也就是屏幕的方向，向右正方向；红色的是 y 轴，向下是正方向；蓝色是 z 轴，屏幕向外是正方向。（如下图所示）

CSS 变换都是基于左手坐标系和透视投影。

常用属性主要有：Transform-origin（基准点），基于哪一个点来做变换，Transform-style（元素呈现方式 2D 还是 3D），Rotate（旋转 - 度数），Scale（缩放 - 大小），Skew（倾斜 - 左右），Translate（移动 -x/ y 轴），Perspective（透视）。

2、浏览器的兼容

• 完全支持 Transform 第一个浏览器版本

• 完全支持 Transform-origin 第一个浏览器版本

• 完全支持 Transform-style 第一个浏览器版本

3、Rotate（旋转，分为 2D 旋转和 3D 旋转）

• rotate(angle)，2D 旋转

    transform: rotate(45deg);

• rotateX(angle)，沿 X 轴 3D 旋转

    transform: rotate(45deg);

• rotateY(angle)，沿 Y 轴 3D 旋转

    transform: rotate(45deg);

• rotateZ(angle)，沿 Z 轴 3D 旋转

    transform: rotate(45deg);

• rotate3d(x, y, z, angle)，3D 旋转；接收四个参数，x y z 介于 0 - 1 之间，确定三维空间唯一坐标点，angle 围绕原点与 x y z 坐标点连线的旋转角度。
  元素围绕着 xyz 在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度，这就是 rotate3D。

    transform: rotate3d(1,1,1,45deg);

4、Scale（缩放，同样分为 2D 缩放和 3D 缩放）

• scale(x[, y])，2D 缩放

    transform: scale(2);

• scaleX(x)，沿 X 轴缩放

    transform: scaleX(2);

• scaleY(y)，沿 Y 轴缩放

    transform: scaleY(2);

• scaleZ(z)，沿 Z 轴缩放 – 单独使用时没有任何效果

    transform: scaleZ(2);

• scale3d(x, y, z)，定义每个方向上的缩放，Z 方向单独使用时没有任何效果

    transform: scale(2,2,2);

5、Skew（倾斜）

• skewX(angle) – 沿 X 轴的 2D 倾斜

  transform: skewX(45deg);

• skewY(angle) – 沿 Y 轴的 2D 倾斜

  transform: skewY(45deg);

• skew(angle-x, angle-y) – 沿 X Y 轴的 2D 倾斜

  transform: skewY(45deg, 45deg);

6、Translate（移动）

• translateX(x)，沿 X 轴位移

    transform: translateX(20px);

• translateY(y)，沿 Y 轴位移

    transform: translateY(20px);

• translateZ(z)，沿 Z 轴位移，需要配合 perspective 属性一起使用

    transform: translateZ(20px);

• translate(x, y)，沿 X Y 轴位移

    transform: translate(20px,20px);

• translate3d(x, y, z)，沿 X Y Z 轴位移

      transform: translate(20px, 20px, 20px);

7、Perspective，定义的是视觉和元素在 3D 空间 Z 平面之间的距离

transform: perspective(200px);

8、Transform-origin（基准点）

在前面的例子里，旋转和倾斜都是基于中心位置，也就是基准点的默认值：50% 50% 0；Transform-origin 接收三个参数，x-axis y-axis z-axis；

在 x 的方向上可以指定：left、center、right、length 和 %；在 y 轴的方向上可以指定：top、center、bottom、length 和 %；在 y 轴的方向上只可以指定：length。

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

9、Transform-style（三维空间的展现形式）

主要有两个值：float – 2D 形式和 preserve-3d – 3D 形式。

本篇文章主要分享了 Transform 的基本概念，简要介绍了 CSS3 坐标系统与透视原理, 重点介绍了 Transform 常用的 Rotate(旋转)、Scale(缩放)、Skew(倾斜)、Translate(移动)、Perspective(透视)属性。