transform

功能：使元素变换（平移、倾斜、缩放、旋转）

transform与position:relative相似，均不会脱离文档流，不会影响页面的布局；但是transform能够进行页面优化，特别是对于动画的性能有较明显的优化效果。

原因：

当发生修改时，transform只进行重新绘制；而position:reletive会重新进行解析html结构和css，生成DOM树和css规则树等一系列操作，最后再进行绘制；

transform为复合属性

.box{
         width: 100px;
         height: 100px;
         background-color: red;
         transform: translate(50px) rotate(45deg) translate(50px) translateY(50px);
}

        box1

特征：

1、旋转会改变X、Y轴的方向；

2、所有属性可以接连写在transform的冒号后面；

3、样式规则为先写先生效；

一、transform:translate 平移

transform:translate(500px,500px);

1、translate(x,y)

x向右边平移，y向下边平移

2、translateX(100px)

向右边平移

3、translateY()

向下边平移

4、translateZ()

向屏幕方向平移（3D立体）

二、transform:rotate 旋转

transform:rotate(45deg);

1、totate(45deg)

45deg：旋转的角度，为45度,默认为绕Z轴旋转

2、totateX()

绕X轴旋转

3、totateY()

绕Y轴旋转

三、transform:scale 缩放

transform:scale(倍数);

倍数大于1就放大，小于1缩小，负数会进行镜像倒置，里面的数字也会随着变化

transform:scale(1);

transform:scale(-1);

transform:scale(.5);

transform:scale(2);

四、transform:skew(x,y) 倾斜

默认围绕x轴倾斜

transform:skew(10deg);

transform:skew(10deg,50deg);

transform:skewX(50deg);

transform:skewY(50deg);

 五、transform-origin:x,y  原点位置        

改变元素的原点位置，原点（旋转圆心、缩放原点、倾斜原点）位置默认是元素的中心点

只能对旋转、缩放和倾斜有效

.box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
            transform: rotate(45deg);
            transform-origin: 0px 0px;
            /* transform-origin: center; */
}

        box1

 原点（旋转圆心）位置如图黄色箭头与黄色椭圆圈

六、perspective 视距

能实现3D效果

ul{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            /* 设置父级ul旋转 */
            animation: rotate 6s linear infinite;
            /* 设置父级ul填充 */
            transform-style: preserve-3d;
}
@keyframes rotate {
            to{
                transform: rotateX(360deg) rotateY(360deg);
            }
}
ul li{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: absolute;
            left: 0;
            top: 0;
            /* 设置li的视距，实现3D效果 */
            perspective: 500px;
}
ul li:nth-child(1){
            transform: translateX(-100px) rotateY(90deg);
}
ul li:nth-child(2){
            transform: translateX(100px) rotateY(90deg);
}
ul li:nth-child(3){
            transform: translateY(-100px) rotateX(90deg);
}
ul li:nth-child(4){
            transform: translateY(100px) rotateX(90deg);
}
ul li:nth-child(5){
            transform: translateZ(100px);
}
ul li:nth-child(6){
            transform: translateZ(-100px);
}

        
左
        
右
        
上
        
下
        
前
        
后