CSS3——2D转换
2D转换transform可以实现元素的位移(translate),旋转(rotate),缩放(scale)等效果
-
位移
transform:translate(x,y)一起写
transform:translateX(n)分开写
transform:translateY(n)分开写
若参数的单位是百分比,则是以盒子和高度和宽度来作为参考点的,也可以以px为单位
优点:不会影响到其他元素
缺点:对行内标签没有效果
img {
width: 200px;
height: 130px;
}
ul {
float: left;
list-style: none;
}
ul li {
float: left;
padding-left: 10px;
}
ul li:hover {
transform: translate(0, -5px);
}
<div>
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
</div>
上述代码实现了鼠标移到li元素上,元素向X方向移动5px
- 旋转
transform:rotate(度数+deg)
角度为正时,顺时针旋转
角度为负时,逆时针旋转
默认旋转的中心点是元素的中心点
div {
width: 300px;
height: 300px;
background-color: pink;
border-radius: 40%;
transition: all .5s;
}
div:hover {
transform: rotate(45deg);
}
<div></div>
上述代码实现了鼠标移到div元素上元素顺时针旋转45°
- 缩放
transform:scale(x,y)
1就是1倍,2就是2倍
0.5就是0.5倍
优点:
1.不会影响其他盒子
2.可以设置移动的中心点
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
div:hover {
transform: scale(2, 2);
}
<div></div>
上述代码实现了鼠标移到div上div宽和高扩大一倍