CSS3之2D与3D

2D变换

前提：二维坐标如下图所示

2D位移

2D位移可以改变元素的位置，具体使用方式如下：

1. 先给元素添加转换属性transform
2. 编写transform的具体值，相关可选值如下：

值	含义
translateX	设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比。
translateY	设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比。
translate	一个值代表水平方向，两个值代表水平和垂直方向。

3. 注意点：
   • 位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。
   • 与相对定位的区别：相对定位的百分比值，参考的是其父元素；位移的百分比值，参考的是其自身。
   • 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
   • transform可以链式编写，如下：
     transform: translateX(30px) translateY(40px);
   • 位移对行内元素无效
   • 位移配合定位，可实现元素水平垂直居中

.box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

2D缩放

2D缩放是指：让元素放大或缩小，具体使用方式如下：

1. 先给元素添加转换属性transform
2. 编写transform的具体值，相关可选值如下：

值	含义
scaleX	设置水平方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
scaleY	设置垂直方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
scale	同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放。

3. 注意点：
   1. scale的值，是支持写负数的，但容易让人产生误解
   2. 借助缩放，可以实现小于12px的文字

2D旋转

2D旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：

1. 先给元素添加转换属性transform
2. 编写transform的具体值，相关可选值如下：

值	含义
rotate	设置旋转角度，需指定一个角度值(deg)，正值顺时针，负值逆时针。

**注意：rotateZ(20deg)相当于rotate(20deg)。

2D扭曲

2D扭曲是指：让元素在二维平面内被”拉扯“，进而”走形“，具体使用方式如下：

1. 先给元素添加转换属性transform
2. 编写transform的具体值，相关可选值如下：

值	含义
skewX	设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。
skewY	设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。
skew	一个值代表shewX，两个值分别代表：shewX、shewY

多重变换

多个变换，可以同时使用一个transform来编写。
transform: translate(-50%, -50%) rotate(45deg);
注意点：多重变换时，建议最后旋转。

变换原点

• 元素变换时，默认的原点是元素的中心，使用transform-origin可以设置变换的原点。
• 修改变换原点对位移没有影响，对旋转和缩放会产生影响。
• 如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
• 如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键词，则另一个坐标取50%

1. transform-origin: 50% 50% ， 变换原点在元素的中心位置，百分比是相对于自  身。—— 默认值
2. transform-origin: left top ，变换原点在元素的左上角 。
3. transform-origin: 50px 50px ， 变换原点距离元素左上角 50px 50px 的位置。
4. transform-origin: 0 ，只写一个值的时候，第二个值默认为 50% 。

3D变换

开启3D空间

重要原则：元素进行3D变换的首要操作：父元素必须开启3D空间！
使用transform-style开启3D空间，可选值如下：

• flat：让子元素位于此元素的二维平面内（2D空间）—默认值
• preserve-3d：让子元素位于此元素的三维空间内（3D空间）

设置景深（有了透视效果，近大远小）

何为景深？—指定观察者与z=0平面的距离，能让发生3D变换的元素，产生透视效果，看来更加立体。
使用perspective设置景深，可选值如下：

• none：不指定透视 —（默认值）
• 长度值：指定观察者距离z=0平面的距离，不允许负值。
  注意：persective设置给发生3D变换元素的父元素！

透视点位置

所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。
使用perspective-origin设置观察者位置（透视点的位置），例如：

/* 相对坐标轴往右偏移400px， 往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）*/
	perspective-origin: 400px 300px;

注意：通常情况下，不需要调整透视点位置。

3D位移

3D位移是在2D位移的基础上，可以让元素沿z轴位移，具体使用方式如下：

1. 先给元素添加转换属性transform
2. 编写transform的具体值，3D相关可选值如下：

值	含义
translateZ	设置z轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。
translate3D	第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，且均不能省略。

3D旋转

3D旋转是在2D旋转的基础上，可以让元素沿x轴和y轴旋转，具体使用方式如下：

1. 先给元素添加转换属性transform
2. 编写transform的具体值，3D相关可选值如下：

值	含义
rotateX	设置x轴旋转角度，需指定一个角度值（deg），面对x轴正方向：正值顺时针，负值逆时针。
rotateY	设置y轴旋转角度，需指定一个角度值（deg），面对y轴正方向：正值顺时针，负值逆时针。
rotate3d	前3个参数分别表示坐标轴：x、y、z，第4个参数表示旋转角度，参数不允许省略。例如：transform:rotate3d(1, 1, 1, 30deg)，意思是：x、y、z分别旋转30度。

3D缩放

3D缩放是在2D缩放的基础上，可以让元素沿z轴缩放，具体使用方式如下：

1. 先给元素添加转换属性transform
2. 编写transform的具体值，3D相关可选值如下：

值	含义
scaleZ	设置z轴方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩放
scale3d	第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许省略。

多重变换

多个变换，可以同时使用一个transform来编写。
transform: translateZ(100px) scaleX(3) rotateY(40deg)
注意点：多重变换时，建议最后旋转。

背部可见性

使用backface-visibility指定元素背面，在面向用户时是否可见，常见值如下：

• visible：指定元素背面可见，允许显示正面的镜像。—默认值
• hidden：指定元素背面不可见。
  **注意：backface-visibility需要加在发生3D变换元素的自身上。