CSS教程
CSS进阶

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>
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4