<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;
}
- translate 的主要作用就是根据给定的x坐标和y坐标进行移动,用法transform: translate(50px, 100px);
- 扭曲:skew( ) 元素翻转给定的角度,根据给定的水平线和垂直线,用法skew(30deg,20deg)
- 缩放:scale( ) 放大或缩小,根据给定的宽度(X 轴)和高度(Y 轴)参数: scale(2,4)
- 改变基准点位置 transform-origin: bottom left;
- 旋转:rotate( ) 元素旋转给定的角度,根据给定的数值,用法rotate(180deg);
3D转换: rotate3d(x,y,z,旋转角度)用法:rotate3d(1,0,0,360deg),其中0和1代表着轴向的选择。
过渡效果 transition (属性名,时间,运动速度曲线,定义过渡效果何时开始)