translate平移应该也算是transform中用的比较多的属性之一了,用法:transform:translate(x轴平移,y轴平移),也可以单独设置:transform:translateX(),transform:translateY()。如果只设置transform:translate(值),那么只会在X轴进行平移。后期在transform-3D还会有transform:translateZ(),这个值在做6面体的时候非常好用,以后再谈。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover宽度增长</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 50px;
background-color: #f00;
transform:translate(50px,40px)
}
div{
width: 200px;
height:300px;
}
p{
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
效果图:
注意:translate平移之后不会将标准流中的元素挤开。其他取值可以一一进行尝试。