CSS样式----变形（transform）

                变形就是指通过CSS来改变元素的形状或位置

                    变形不会影响到页面的布局

                    transform 用来设置元素变形的效果

                        平移：

                            translateX(); 沿着x轴平移

                            translateY(); 沿着y轴平移

                            translateZ(); 沿着z轴平移

                                ()内可以填百分比，此时这个百分比是相对于自身计算的

                特殊！！

                z轴平移，就是调整元素的在z轴的位置，正常情况就是调整元素和人眼间的距离(我个人感觉理解成元素到屏幕的距离更容易接受)

                    距离越大，元素离人越近

                z轴平移属于立体效果（近大远小），默认情况下浏览器不支持透视（即元素离我们远近，元素的大小不变）

                    如果想显示这个效果，我们必须设置网页的视距

                        如：perspective: 800px;          

                注意！！！在没有旋转的情况下，z轴垂直于屏幕，当有旋转时，z轴方向就会发生变化，需要自己尝试

                注意！！！一个元素只能有一个 transform ，当同时存在多个tranform时，下边的会完全覆盖上边的，所以变形要写在同一个tranform内，之间用空格隔开

                当我们想要元素垂直水平居中时

                    left: 0;

                    right: 0;

                    bottom: 0;

                    top: 0;

                    margin:auto;

                    但这种方式只适用于元素的大小确定的情况

 

                当元素大小不确定时，我们可以

                    left: 50%;

                    top: 50%;

                    transform: translateX(-50%) translateY(-50%);

                    这样不管元素大小多少，都可以使元素在其包含块内垂直水平居中

                        旋转：        

                            通过旋转可以使元素沿着x y 或 z 轴旋转指定的角度 

                                rotateX()

                                rotateY()

                                rotateZ()

                                    ()内可以填deg 也可以填turn（圈）1turn = 360deg

                                当旋转和z轴平移同时存在时，两者的先后顺序不同，效果也不同

                                如：transform: rotateY(180deg) translateZ(400PX);和 transform: translateZ(400PX) rotateY(180deg);

                                两者的效果截然不同

                            transform-style: preserve-3d;可以设置3d变形效果

                            backface-visibility: 可以设置元素背面是否可见