CSS3转换(transform)基本用法介绍

一个炫酷的网页离不开css的transform、transition、animation三个属性，之前一直没有涉及到这块内容，刚好最近要做一个相关东西，趁此机会好好学一学这三个属性。

一、功能

实现元素的平移、旋转、缩放或倾斜。

二、实现条件

只能转换由盒模型定位的元素。

三、基本语法

transform: none

不应用任何变换

transform: <transform-function>

应用一个或多个<transform-function>值，以空格分开

 <transform-function>是啥？

 它是css中的一种数据类型，用于对元素的显示做变换。包括二维变换和三维变换。

四、实现方式

1. 变形原点

在介绍转换之前需要先介绍一下变形原点，即转换的基点。

(1) 语法

transform-origin：初始值为(50%, 50%, 0)，即center。其属性值有：
- 一个值：
  
  必须是<length>, <percentage>, 或 left, center, right, top, bottom关键字中的一个。如果是<length>, <percentage>则表示x-offset，如果是keyword则表示其应有的意思。（即left、right是横向的，top、bottom是纵向的，center是中间的）
- 两个值：
  - 一个值是<length>, <percentage>, 或 left, center, right关键字中的一个。表示距离和模型左侧的偏移值（即x-offset或x-offset-keyword）
  - 另一个值是<length>, <percentage>, 或 top, center, bottom关键字中的一个。表示距离和模型顶部的偏移值（即y-offset或y-offset-keyword）
    - 如果第一个值是<length>, <percentage>, left, right，则表示x轴的偏移，另一个值必须是y-offset或y-offset-keyword（top、bottom）。
    - 如果第一个值是top,bottom，则表示y轴的偏移，另一个值可以是<length>, <percentage>或 left, right表示x轴的偏移。
    - 如果第二个值是left或right，则第二个值表示x轴的，那么第一个值可以是, <percentage>或 top, bottom表示y轴的偏移。
      
      (听起来好绕hhh，但其实不复杂，意思就是两个值对于x，y的顺序没有规定死，可以自定义，一个表示x轴，那另一个值必须得用y轴的。但如果俩都是值的话，那第一个是x，第二个是y)
- 三个值：
  - 前两个值同只有两个值时的用法相同。
  - 第三个值必须得是<length>。表示Z轴偏移量。
- PS：keyword与value的值对应关系如下：
  - left —— 0%
  - center —— 50%
  - right —— 100%
  - top —— 0%
  - bottom —— 100%

(2) 示例

2. 平移

（1）语法

二维：translate(tx, ty)

参数：
- tx: 要移动矢量的横坐标。
- ty: 要移动矢量的纵坐标。可以不写，默认为0。
三维：translate3d(tx, ty, tz)

参数：
- tx: 移动矢量的横坐标。
- ty: 移动矢量的纵坐标。
- tz: 移动矢量的z轴坐标。不能使用百分比，否则会被认为无效属性！
translateX(t)、translateY(t)、translateZ(t)

不用多说了，分别是translate(tx, 0)、translate(0, ty)、translate3d(0, 0, tz)的简写形式。

（2）示例

<div class="transform-div"></div>

.transform-div {

  width: 200px;

  height: 200px;

  background-color: orange;

  transform: translate(300px, 10%);

}

3. 旋转

(1) 语法

二维： rotate(a)
- 参数：表示旋转的角度。正角表示顺时针旋转，负角表示逆时针旋转。
三维： rotate3d(x, y, z, a)
- 效果：3D旋转，绕着固定轴旋转。旋转轴由[x,y,z]向量定义，且过原点（由transform-origin定义）。[x,y,z]向量需要标准化，即三个坐标平方和为1，但如果没有标准化也没事，因为它在内部会被标准化，但对于不能被标准化的向量，如空向量，会导致旋转不被应用，但不会影响整个CSS属性。
- 参数：
  - x、y、z: 顾名思义，分别是旋转向量的x、y、z坐标，都为<number>
  - a: 旋转角度。正值表示顺时针，负值表示逆时针。
rotateX(a), rotateY(a), rotateZ(a)：分别是rotate3D(1, 0, 0, a), rotate3D(0, 1, 0, a), rotate3D(0, 0, 1, a)的简写。

(2) 示例

<div class="container">

	<div class="line1"></div>

	<div class="line2"></div>

	<div class="transform-div"></div>

</div>

.container {

	width: 400px;

	height: 400px;

	border: 4px solid;

	position: relative;

}

.transform-div {

	position: absolute;

	top: 50%;

	left: 50%;

	margin-top: -100px;

	margin-left: -100px;

	width: 200px;

	height: 200px;

	background-color: orange;

	transition: all 1s;

	transform: none;

	opacity: 0.7;

}

.transform-div:hover {

	transform: rotateY(-45deg);

}

.line1 {

	position: absolute;

	width: 100%;

	height: 50%;

	border-bottom: 2px solid;

}

.line2 {

	position: absolute;

	top: 0;

	height: 100%;

	width: 50%;

	border-right: 2px solid;

}

（截图看到的效果不是很清晰，可以复制上述代码看一下旋转效果）

4. 缩放

(1) 语法

二维： scale(sx) 或 scale(sx, sy)
- 效果：分别在x方向和在y方向放大or缩小一定的倍数，不同方向上的放大/缩小倍数可以不同。
- 参数：
  - sx：缩放矢量的横坐标，为<number>值。
  - sy：缩放矢量的纵坐标，为<number>值。可以不存在，若不存在，则默认值与sx相同，即元素均匀缩放。
  - 值的大小在[-1,1]时，元素为缩放；大小在[-1,1]范围外时，为放大元素；当等于1时，什么都不做；当为负值时，执行点反射和大小修改。
三维： scale3d(sx, sy, sz)
- 参数：分别表示在横轴、纵轴、z轴的缩放大小。

5. 倾斜

(1) 语法

skew(ax) 或 skew(ax, ay)
- 参数：ax、ay表示沿横、纵坐标扭曲元素的程度。是一个角度。
skewX(a)
- 效果：水平拉伸，将元素每个点在水平方向上扭曲一定程度。
- 参数：是一个角度，表示用于沿着横坐标扭曲元素的角度。
skewY(a)
- 效果：垂直拉伸，将元素每个点在垂直方向上扭曲一定程度。
- 参数：是一个角度，表示用于沿着纵坐标扭曲元素的角度。

(2) 示例

【补充】CSS角度单位：deg（度）、grad（梯度）、rad（弧度）、turn（圆、圈）

180deg = 200grad = 0.5turn = Π

6. 复合变换

复合变换顺序：按从左到右的顺序。（这个顺序我自己没有很理解，我试了几个，只要没有旋转，无论顺序如何，得到的结果都是一样的，不懂原理，于是网上查了查，发现了这篇博客：https://www.cnblogs.com/xljzlw/p/4966798.html 值得参考。在旋转的时候，坐标系也会跟着旋转，所以旋转的顺序至关重要，如下示例：）

示例：

【解释】如上图所示，平移和旋转的顺序不同，得到的结果也不同。根本原因是，旋转时坐标系会跟着旋转。如下图：

【ps】只要不涉及旋转，那么顺序就无所谓，因为坐标系不会变。如果涉及到旋转，就要考虑顺序问题了，为了得到自己想要的效果，可以每次都把旋转放到最后。

【扩展】还可以直接在transform之后写变换矩阵：matrix()、matrix3d()，具体见文档。