CSS3-变换

2D变换

位移
2D位移可以改变元素的位置，具体如下：
先给元素添加转换属性：transform

值	含义
translateX	设置水平方向位移，需指定长度值； 若指定的是百分比，是参考自身宽度的百分比
translateY	设置垂直方向位移，需指定长度值； 若指定的是百分比，是参考自身高度的百分比
translate	一个值代表水平方向，两个值(注意需要,隔开)代表：水平和垂直方向

注意点：

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

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

缩放
2D缩放是指：让元素放大或缩小，具体使用方式如下：
先给元素添加转换属性：transform

值	含义
scaleX	设置水平方向缩放比例，值为一个数字； 1表示不说法，大于1放大， 小于1缩小
scaleY	设置垂直方向缩放比例，值为一个数字； 1表示不说法，大于1放大， 小于1缩小
scale	一个值代表同时设置水平垂直方向，两个值(注意需要,隔开)代表：水平和垂直方向

注意点：

1、scale的值，是支持写附属的，但几乎不用，因为容易让人误解；
2、借助缩放，也可实现元素水平垂直方向居中

transform: scale(0.9);

旋转
2D旋转是指：让元素在二维平面内，顺时针或逆时针旋转，具体使用方式如下：
先给元素添加转换属性：transform

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

注意：
1、rotateZ(30deg)相当于rotate(30deg),当然了学到3D变化的时候，还能写：rotate(x,x,x)
2、因为旋转后改变了坐标系，所以建议多重变换时，旋转最后编写。

扭曲（了解）
2D扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，具体使用方式如下：
先给元素添加转换属性：transform

值	含义
skewX	设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。
skewY	设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。
skew	设置一个值代表水平方向扭曲，设置两个值且用,隔开，代表水平和垂直方向扭曲。

变换原点
元素变换时，默认的原点是元素的中心，使用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空间与景深
1、开启3D空间
重要原则：元素进行3D变换的首要操作，父元素必须开启3D空间

使用transform-style开始3D空间，可选值如下：
flat：让子元素在于元素二维平面内（2D空间）---默认值
preserve-3d：让子元素位于三维空间内（3D空间）

transform-style: preserve-3d;

2、设置景深
何为景深？---指定观察者与z=0平面的距离，能让发生3D变换的元素产生透视效果，看起来更加立体。

使用perspective设置景深，可选值如下：
none：不指定透视---（默认值）
长度值：指定观察者距离z=0平面的距离，不允许负值。
注意：perspective设置给发生3D变换元素的父元素！

perspective: 500px;

透视点位置
所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。

使用perspective-origin设置透视点位置，例如：
perspective-origin: 20px 20px;
注意：通常情况下，我们不需要调整透视点位置。

3D位移
3D位移是在2D位移的基础上，可以让元素沿z轴位移，具体使用方式如下:
先给元素添加转换属性：transform

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

transform: translate3d(10px,10px,10px);

3D旋转
3D旋转是在2D旋转的基础上，可以让元素沿x轴和y轴进行旋转，具体使用方式如下：
先给元素添加转换属性：transform

值	含义
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轴进行缩放，具体使用方式如下：
先给元素添加转换属性：transform

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

背部可见性
设置backface-visibility，可以隐藏展示背部
可选值：

值	含义
visible	背部朝向用户时可见。（默认值）
hidden	背部朝向用户时不可见。

backface-visibility: hidden;