一、transfrom 可以用来设置元素的形状改变，主要有以下几种变形：roate(旋转) scale(缩放) skew(扭曲） translate (平移);
使用方法：div{transform:none|transform-function[...]} transform-function[...]指的是roate()...等函数，可以有一个或者多个，用空格隔开，参数包含在括号里面；none表示不作任何变换
如：
div{transform: scale(1,3) roate(30deg)}
tansform-origin 基点：所有的变形都是基于基点，基点默认为元素的中心点
用法：
div{transform:transform-origin:(x,y)} //x,y的值是百分比，rem,px... 也可以用单词：x: left/center/right y:top/center/bottom
roate 旋转 表示通过指定的角度对元素进行旋转变形，整数表示顺时针，负数表示逆时针
div{transform:roate(30deg)}
scale 缩放 对元素进行放大或者缩小；
div{transform:scale(3,2)}//当不指定X或者是Y时，水平、垂直同时缩放；scaleX(1) scaleY(2)
//注：缩放比例大于1时是放大 小于1时是缩小 等于1是原始比例，不做缩放
translate 移动 移动的单位长度是px rem ...
div{transform:translate(10px,20px)}//translateX(10px) translateY（20px）
skew 扭曲
div{transform:skew(30deg)} //当只有一个参数时，表示水平垂直都是扭曲一样的，也可是skewX（20deg） skewY(10deg) skew(10deg,20deg)