CSS3 transform介绍

<ul class="nav-list">
   <li class="nav-color nav-1">translate</li>
    <li class="nav-color nav-2">rotate</li>
    <li class="nav-color nav-3">scale</li>
    <li class="nav-color nav-4">skew</li>
    <li class="nav-color nav-5">rotate3d</li>
    <li class="nav-color nav-6">rotate-orgin</li>
</ul>

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-list{
    width: 950px;
    height: 340px;
    overflow: hidden;
    perspective:200px;
    margin: 30px auto;
}
.nav-list li{
    width: 150px;
    height: 70px;
    line-height: 70px!important;
    cursor: pointer;
    line-height: 30px;
    float: left;
    margin-top: 50px;
    margin-right: 10px;
    text-align: center;
    transition: all .6s ease;
}
.nav-list li:last-child{
    margin-right: 0;
}
.nav-list .nav-color{
    background: linear-gradient(to right, #fdcbf1 , #e6dee9);
}
.nav-list .nav-1:hover{
    transform: translateY(5px);
    color: #fff;
}
.nav-list .nav-2:hover{
    transform: rotate(360deg);
    color: #fff;
}
.nav-list .nav-3:hover{
    transform: scale(1.1);
    color: #fff;
}
.nav-list .nav-4:hover{
    background:linear-gradient(to right top, #Fa709a ,#fee140);
    transform: skew(30deg,20deg);
    color: #fff;
}
.nav-list .nav-5:hover{
    background: linear-gradient(to right top, #Fa709a ,#fee140);
    transform: rotate3d(1,0,0,360deg);
    color: #fff;
}
.nav-list .nav-6:hover{
    background: linear-gradient(to right top, #Fa709a ,#fee140);
    transform: rotate(90deg);
    transform-origin: left bottom;
    color: #fff;
}

1. translate 的主要作用就是根据给定的x坐标和y坐标进行移动，用法transform: translate(50px, 100px);
2. 扭曲：skew( ) 元素翻转给定的角度,根据给定的水平线和垂直线，用法skew(30deg,20deg)
3. 缩放：scale( ) 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)
4. 改变基准点位置 transform-origin: bottom left;
5. 旋转：rotate( ) 元素旋转给定的角度，根据给定的数值，用法rotate(180deg);

6. 3D转换： rotate3d（x,y,z,旋转角度）用法：rotate3d(1,0,0,360deg)，其中0和1代表着轴向的选择。

   过渡效果 transition （属性名,时间,运动速度曲线,定义过渡效果何时开始）