La función translate3d() es una función incorporada que se utiliza para reposicionar un elemento en el espacio 3D.
Sintaxis:
translate3d( tx, ty, tz )
Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- tx: este parámetro contiene la longitud de la traducción correspondiente al eje x. Este parámetro contiene el valor en forma de número o porcentaje.
- ty: este parámetro contiene la longitud de la traducción correspondiente al eje y. Este parámetro contiene el valor en forma de número o porcentaje.
- tz: este parámetro contiene la longitud de la traducción correspondiente al eje z. Este parámetro contiene el valor solo en forma de números.
Los siguientes ejemplos ilustran la función translate3d() en CSS:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
CSS translate3d() function
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
.translate3d_image {
transform: translate3d(100px, 0, 0);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS translate3d() function</h2>
<h4>Original Image</h4>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
<br>
<h4>Translated image</h4>
<img class="translate3d_image"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>CSS translate3d() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.GFG {
font-size:35px;
font-weight:bold;
color:green;
}
.geeks {
transform: translate3d(100px, 20px, 0);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS translate3d() function</h2>
<h4>Original Element</h4>
<div class="GFG">Welcome to GeeksforGeeks</div>
<h4>Translated Element</h4>
<div class="GFG geeks">Welcome to GeeksforGeeks</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la función translate3d() se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera