CSS translate()
translate()函数是CSS的内置函数,用于在垂直或水平方向上重新定位元素,它将根据给定的参数从当前方向移动元素。
语法
transform: translate(tx)
transform: translate(tx,ty)
参数
ty 是可选的。如果未指定,则假定其值为零。现在,我们将详细讨论每个参数。
参数
tx: 该参数定义了沿x轴的平移长度。它代表翻译向量的横坐标(水平,x坐标)。如果我们写
translate(4),则它等同于
translate(4,0)。
ty: 定义与y轴对应的平移长度。它的默认值为0,该值在未定义此参数的值时使用。
让我们通过一些插图来理解此功能。
示例1
在此示例中,我们将仅定义参数
tx 的值。
<!DOCTYPE html>
<html>
<head>
<title>translate() function</title>
<style>
.trans {
transform: translate(200px); /*It is equal to translate(200px,0)*/
}
</style>
</head>
<body>
<h2>Original Image</h2>
<img src= "jtp.png">
<h2>Translated Image</h2>
<img class="trans" src= "jtp.png">
</body>
</html>
示例2
<!DOCTYPE html>
<html>
<head>
<title>translate() function</title>
<style>
.trans {
transform: translate(200px,100px);
</style>
</head>
<body>
<h2>Original Image</h2>
<img src= "jtp.png">
<h2>Translated Image</h2>
<img class="trans" src= "jtp.png">
</body>
</html>