https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translate
translate() 这个 CSS 函数在水平和/或垂直方向上重新定位元素。
translate可以改变元素在页面中的位置,类似定位。
语法:
transform: translate(x, y);
或
transform: translateX(x);
transform: translateY(y);
x就是在x 轴上移动位置, y就是在y轴上移动位置。
- translate的优点:不会影响其它元素的位置。
示例
示例:水平向右移动100px,垂直向下移动100px
用transform: translate(100px, 100px)
水平向右移动100px,垂直向下移动100px
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate(100px, 100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
示例:水平向右移动100px,垂直不移动
用transform: translate(100px, 0)
水平向右移动100px,垂直不移动。
或者写为transform: translateX(100px);
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate(100px, 0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
示例:垂直向下移动100px
可以使用transform: translate(0, 100px);
或者 transform: translateY(100px);
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
/* transform: translate(0, 100px); */
transform: translateY(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
示例:translate不会影响其它元素的位置
下面有两个div,第一个div使用transform: translate(50px, 50px);
并不会影响第2个div:
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:first-child {
transform: translate(50px, 50px);
}
div:last-child {
background-color: green;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>