1. 变形功能的诞生
在以前的变形上，仅仅是视觉效果上的变形，在底层的坐标方格上没有发生改变。自从CSS3诞生后，元素的特效就从二维走向了三维。之前我们通过浮动、margin 这些操作，都是让元素平移。
在CSS3中，就诞生了这么一个属性：transform 。这个变形功能，不仅可以平移元素，还能旋转、元素翻转或者其他更加强大的自定义特效。
2. 变形 transform
变形只有一个属性：transform ，不过有很多辅助的属性值用于控制如何变形。对于变形元素，要注意点，变形的元素有自己的堆叠上下文：经过缩放、平移变形后的元素，在视觉上虽然比以前大或者比以前小了，但是元素在页面上所占用的空间仍然与变形前的大小一致。
transform: <transform-list> | none;
2.1 二维变形
二维变形，就是通过平移、旋转、放大缩小和扭曲产生的形变，这个形变只在 x 和 y 轴上发生改变。
| 值 | 描述 |
|---|---|
| rotate() | 旋转 |
| translate() | 平移 |
| scale() | 放大缩小 |
| skew() | 扭曲/斜切 |
2.1.1 旋转
transform: rotate(30deg);
这段代码表示让元素以顺时针方向旋转30度，正数为顺时针，负数为逆时针。deg 表示的是旋转的角度。默认情况下，是以元素的中心点来旋转的。
如果旋转的角度设置大于360度，那旋转函数就会对角度值进行取余。例如，旋转1080deg，那 1080%360 等于 0 度，旋转900度，则是 900%360 等于 180度。
刚刚提到，元素默认的旋转中心是元素的中心位置，这个位置可以通过 transform-origin 来改变
transform-origin: left top;
它的属性值，可以使用 left、center、right；top、center、bottom来表示，也可以使用百分比或者具体的长度单位来表示。第一个值表示水平方向，第二个值表示垂直方向。
2.1.2 平移
transform: translate(50px,100px);
平移的单位为px，用于设置水平方向和垂直方向的位移。它可以传递两个参数，第一个参数就是表示水平方向，第二个参数就是垂直方向。当传递一个参数时，它代表水平方向，垂直位移会设为0。
transform: translateX(50px);
transform: translateY(100px);
其中，translate的值可以设置为负值。水平方向的正方向为右，垂直方向的正方向为下。负值就代表反方向平移
2.1.3 缩放
transform: scale(2);
scale 表示缩放，不需要单位，可以为小数。1 表示百分百的原始大小，在0～1之间表示缩小，大于1表示放大。它同样存在两个值，第一个表示水平方向，第二个表示垂直方向。
当 scale 值为负数时，左右、上下将会颠倒。
2.1.4 扭曲
transform: skew(15deg);
该属性代表扭曲或者斜切，单位和旋转一样，使用 deg 作为扭曲的角度，可以为负值。由于使用 skew 会导致图像和内容失真变形，因此在实际开发时很少使用。
2.2 三维变形
三维变形和二维变形一样，还是使用 transform 属性。那么怎样让浏览器知道，这段代码是以3D的形式去进行解读呢？通常有两种方法
-
第一种：直接提前告知浏览器变形方式
-webkit-transform-style: preserve-3d;这段代码需要添加给三维变形元素的腹肌，提前告知浏览器：我的子元素要3D变身了，然后浏览器会按照三维变形的方式渲染父级以及父级内部的元素。
-
第二种：直接使用CSS3三维变形语法
transform: translate3D(100px,200px,300px);transform: translateX(100px) translateY(200px) translateZ(300px);在三维变形的属性中，都可以按照这种三维书写方式来写。除了 skew，因为它的三维和二维没有任何变化。
思考问题
1. 变形的顺序会不会影响最终的效果？
当一个变形中，并不仅仅存在一个变形时（即需要旋转，也需要平移），不同变形的书写顺序可能会影响最终的效果。
transform: translate(100px) rotateZ(30deg);transform: rotateZ(30deg) translate(100px);
第一段代码表示的是，先平移，后旋转；第二段则是先旋转后平移。可以发现，在第二段明显发生了垂直方向上的位移，这时因为如果元素先旋转，元素的X与Y轴的位置发生改变，接着平移的位置再按照新的x轴方向进行位移，这就导致了在页面垂直方向上发生了位移的改变。所以说，在写变形效果时，需要先考虑好变形的顺序，再进行代码的书写。
2. 对于 rotate(0deg) 能否简写成 rotate(0)
原则上是可以简写，但是在火狐的部分版本中，无法正常读取无单位的角度值。因此考虑兼容性，尽量不要省略。
网友评论