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平移之后不会将标准流中的元素挤开。其他取值可以一一进行尝试。
6615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
