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 （属性名,时间,运动速度曲线,定义过渡效果何时开始）