transform的用法：
transform：translate（x轴平移，y轴平移）; 也可以单独设置：transform：translateX（）; transform：translateY（）。如果只设置transform：translate（值），那么只会在X轴进行平移。值可以取负数。
也可以设置为 translateZ(); 但是需要 配合旋转，效果才比较明显。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.warpper{
width: 600px;
height: 500px;
background-color: #fff;
position: relative;
left: 30px;
top: 30px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
transform: translate(100px);
}
</style>
</head>
<body bgcolor="black">
<div class="warpper">
<div class="box"> </div>
</div>
</body>
</html>
当设置为 translateX(值) 时，元素会水平方向上进行移动。translateX(100px);
当值为负数时，元素就会在水平方向上向 左平移。
当设置为 translateY(值) 时，元素会垂直方向上进行移动。 translateY(100px);
当值为负数时，元素就会在垂直方向上向 上平移。
当设置为 translate(值) 时，如果里面只有一个值，则只会向水平方向上移动。 translate(100px);
如果设置为 translate(值1，值2) 时，则只会向水平方向上移动 和 向垂直方向上移动。 translate(100px，100px);
也可以写成 transform:translateX(100px) translateY(100px); 效果一样。
5876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
