前端元素变形

变形相关属性 

       transform 用于设置变形，支持一个或多个变形函数

            1.translate位移

                translate(tx [,ty]) 元素沿x轴移动tx的距离，沿y轴移动ty的距离 ty可以省略，默认为0

                translate3d(tx,ty,tz)

                translateX(tx)元素沿x轴移动tx的距离

                translateY(ty)元素沿y轴移动ty的距离

                translateZ(tz)元素沿z轴移动tz的距离

           

            2 .缩放

                scale(sx [,sy]) 元素沿x轴方向的缩放比sx，沿y轴方向的缩放比为sy，sy可以省略，sy的值默认和sx相同

                scale3d(sx,sy,sz)元素沿x轴方向的缩放比sx,元素沿y轴方向的缩放比sy,元素沿z轴方向的缩放比sz

                scaleX(sx)元素沿x轴方向的缩放比sx

                scaleY(sy)元素沿y轴方向的缩放比sy

                scaleZ(sz)元素沿z轴方向的缩放比sz

            3 .倾斜

                skew(sx [,sy])元素沿x轴方向倾斜sx，沿y轴方向的倾斜sy，单位为deg，sy可以省略，默认为0

                skewX()元素沿x轴方向倾斜sx角度

                skewY()元素沿y轴方向倾斜sy角度

            4. 旋转

                rotate(angle) 元素绕Z轴顺时针旋转 angle角度deg

                rotate(x,y,z,angle)元素绕指定轴顺时针旋转 x,y,z,表示旋转轴

                rotateX(angle)元素绕x轴顺时针旋转 上往里下往外 angle角度deg

                rotateY(angle)元素绕x轴顺时针旋转 左往外右往里 angle角度deg

对div元素实现变形的代码如下：

div {
            margin: 50px auto;
            width: 100px;
            height: 100px;
            background: pink;
            /* transform: translate(30px, 500px); */
            /* transform: scale(0.5); */
            /* transform: skew(30deg); */
            transform: rotate(45deg);
        }