CSS3 transform变形属性、2D变形、3D变形

第十五章：transform变形属性

一、2D变形
二、3D变形
总结

一、2D变形

transform属性可以使元素进行旋转、平移、缩放、倾斜等形状的变化，简称变形。下面的属性值，分别代表着元素的变化状态
在这里插入图片描述

1. rotate（）旋转属性值

transform: rotate(角度值); 单位：deg
如： transform: rotate(45deg);
如： transform: rotate(-45deg);

元素是默认围绕正中心点进行旋转的；
角度值为正数，表示顺时针旋转；
角度值为负数，表示逆时针旋转。

2. translate（）位移属性值

复合写法：设置元素以自身初始位置为原点的偏移效果

transform：translate(水平偏移量，垂直偏移量); 单位：像素值/百分比
如：transform: translate(200px,300px);
或：transform: translateX(200px) translateY(300px)

单独写：字母X和Y必须是大写的

偏移量X:定义元素水平方向的偏移量，在水平方向上移动，可以单独用translateX()来设置
如：transform: translateX(100px);
偏移量Y:定义元素垂直方向的偏移量，在垂直方向上移动，可以单独用translateY()来设置。
如：
transform: translateY(200px);

3. scale（）缩放属性值

transform: scale(缩放倍数值）;

默认缩放数值为1。数值为正数，即为正常缩放；数值为负数，即为倒置缩放。

数值取值范围：
倍数：0~1 正常缩小，> 1 正常放大；
倍数： <0，元素倒置（-1~0 倒置缩小，小于-1 倒置放大）。

缩放倍数值可以设置两个数值，分别表示水平缩放scaleX，和垂直缩放scaleY。因此也可复合写和单独写。

4. skew（）倾斜属性值

transform: skew(倾斜角度值); 单位：deg
倾斜角度值可设置一个，也可以设置两个值，分别表示水平方向倾斜skewX，和垂直方向倾斜skewY，同前面两个一样。

5. transform-origin 变化原点属性

元素默认的变化原点就是该元素的中心点，我们可以通过transform-origin 属性自定义设置变化原点作为上述4种变形的参考点。

transform-origin:水平位置垂直位置; 可用百分比或px像素值表示

默认值为transform-origin:50% 50%; /*是元素的正中心位置：*/。

也可以根据需要自行设置变化的原点位置。
例如：设置左上角顶点为变化原点
transform-origin:0 0;

6. 复合写法、变换顺序组合

上述4种变形可通过复合写法来表示

规范的顺序： transform: scale() translate() skew() rotate();
先后顺序的问题：即使是同样的属性值，写的顺序不同，其带来的结果也不一样，所以一般把旋转放在后面。
先看一段代码：

.wrap .box1{
           /* 先平移，水平移动200px，垂直移动200px，最后旋转45度 */
            transform: translate(200px,200px) rotate(45deg);
        }
.wrap .box2{
           /* 先旋转，旋转45度 ，再水平移动200px，垂直移动200px */
            transform: rotate(45deg) translate(200px,200px) ;
        }

效果图：
在这里插入图片描述
我们会发现先平移再旋转与先旋转再平移之后的效果完全不一样。那是因为如果先旋转之后，则其移动的原本水平方向和垂直方向会因旋转的改变而改变。

二、3D变形

3D变形，同样拥有和2D变形一样拥有上述4种状态、以及变化原点的改变。此处我们着重讲解3D位移和3D旋转。

1. 3D的方向感

以屏幕作为参考面：

X轴：水平方向，即左右方向

Y轴：竖直方向，即上下方向

Z轴：垂直于X轴和Y轴所组成的平面方向，即垂直于屏幕面的方向

2. perspective视觉景深属性

要看到3D的变化效果，必须设置景深 perspective属性，用像素值表示。

景深，即为视距效果，视距越大看的也就越远（一般最少600px起步）
给进行了3D变形元素的父级添加perspective属性，而不是变形元素本身。

3. transform-style: preserve-3d;显示3D层级

如果子元素有多个3D变形效果，需要添加transform-style: preserve-3d;属性，开启上帝视角，展示多个子元素的3d效果，来显示正确的3D层级。

4. 3D变形

3D缩放和3D倾斜用的较少，主要应用3D位移和3D旋转。
3D变形多结合于动画，伪类、js等来实现

3D位移：

transform: translateX（）表示X方向上（水平方向上）的移动量

transform: translateY（）表示Y方向上（竖直方向上）的移动量

transform: translateZ（）表示Z方向上（垂直于X、Y所在平面的方向上）的移动量

transform: translate3d（）三个方向上的移动量。（注意：其他几个变形属性值不一定都支持这种复合的写法）

3D旋转：

transform: translateX() 表示绕X轴旋转

transform: translateY() 表示绕Y轴旋转

transform: translateZ() 表示绕Z轴旋转

具体使用案例可移步后面两篇文章：利用3D属性制作心动的感觉、旋转魔盒的案例

总结

上述是小编为大家整理的2D变形的4种属性值：旋转、位移、缩放、倾斜所代表的4种变形状态，以及变化原点属性，多种变形状态的复合写法，特别是强调了不同顺序导致不同的变形结果。3D变形的对视觉景深和如何展示3D层级等都进行了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。