浅谈transform

transform,顾名思义，就是“转换”之意，该属性允许我们对元素进行旋转，缩放，移动，或者倾斜。这里我们只说transform 2D，下面将来一一介绍。
transform:translate，移动，在2D转换中有X，Y方向

transform:translateX(a px),表示延X轴移动a  px 距离，
transform:translateY(b px),表示延Y轴移动b px 距离，
transform:translate(a px, b px),表示延X轴移动a  px 距离，延Y轴移动b  px 距离，
注意：transform:translate(a px),表示延X轴移动a  px 距离

transform:rotate(a deg), 2D旋转 ，设置元素在2D平面旋转，正数按顺时针，负数逆时针，延中心店旋转

transform:rotateX(45deg),表示延X 轴旋转45度，
transform:rotateY(45deg),表示延Y 轴旋转45度,
transform:rotate(45deg),表示延X Y轴同时旋转45度

transform:scale(a,b), 设置元素在x,y轴方向的缩放比例，可以设置负值，应用场景：设置小于12px的文字

tansform:scaleX(2),表示在延X轴方向放大两倍
tansform:scaleY(2),表示在延Y轴方向放大两倍
transform: scale(2);表示在X Y轴同时放大两倍
注意：同样可以设置负数。

trasform:skew，设置元素在2D平面倾斜

transform:skewX(45deg),表示延X轴正方向倾斜45度
transform:skewY(45deg),表示延Y轴正方向倾斜45度
transform:skew(45deg,45deg),表示延X，Y轴正方向同时倾斜45度
注意：如果transform:skew(45deg),则表示只延X轴倾斜45度

transform-origin: X Y 设置中心点的位置

transform-origin:center center;表示在元素的正中心位置为该图形的中心点
其中：X  Y 值也可以为left ,right , 数值，等等

说完transform，那就不得不说transition,过渡，平常见到的有过渡效果的基本都要用transition;

 transition-property:all 指定可以过渡的属性 
 transition-duration: 0s 过渡完成需要的时间，单位是s秒, 可以设置小数 
transition-timing-function: ease 过渡完成的动画类型 
transition-delay: 0s  延迟执行过渡的时间，单位是s秒 
注意：transition不支持display和font-style属性

可以用手风琴例子来演示下：
html代码

<div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
    </div

CSS部分代码

   .wrap{
            width: 500px;
            height: 350px;
            border: 1px solid black;
            margin: 200px 400px;
        }
        .box1,.box2,.box3,.box4{
            float: right;
            width: 50px;
            height: 350px;
            transition: all 1s;
        }
        .box1{
            background-color: black;
        }
        .box2{
            background-color: orange;
        }
        .box3{
            background-color: blue;
        }
        .box4{
            background-color: green;
        }
        .box5{
            width: 300px;
            height: 350px;
            background-color: red;
        }
        .box1:hover{
            width: 300px;
        }
        .box2:hover{
            width: 300px;
        }
        .box3:hover{
            width: 300px;
        }
        .box4:hover{
            width: 300px;
        }

大家可以复制代码尝试下，那么，transform就讲到这里。