La propiedad de transformación en CSS se usa para cambiar el espacio de coordenadas del modelo de formato visual. Esto se usa para agregar efectos como sesgar, rotar, traducir, etc. en los elementos.
Sintaxis:
transform: none|transform-functions|initial|inherit;
Nota: Las transformaciones pueden ser de tipo 2-D o 3-D.
Valores:
- none : No se produce ninguna transformación.
- matrix(x, x, x, x, x, x): Especifica una transformación matricial de tipo 2-D. Toma 6 valores.
- matrix3d(x, x, x, x, x, x, x, x, x): Especifica una transformación matricial de tipo 3-D. Toma 9 valores.
- translate(x, y): Especifica una traslación a través de los ejes X e Y.
- translate3d(x, y, z): especifica una traslación en los ejes X, Y y Z.
- translateX(x): especifica la traducción solo en el eje X.
- translateY(y): especifica la traducción solo en el eje Y.
- translateZ(z): especifica la traslación solo en el eje Z.
- rotar(ángulo): Especifica el ángulo de rotación.
- rotarX(ángulo): Especifica la rotación junto con el eje X correspondiente al ángulo de rotación.
- roatateY(angle): Especifica la rotación junto con el eje Y correspondiente al ángulo de rotación.
- roteteZ(angle): Especifica la rotación junto con el eje Z correspondiente al ángulo de rotación.
- scale(x, y): Especifica la transformación de escala a lo largo de los ejes X e Y.
- scale3d(x, y, z): Especifica la transformación de escala a lo largo de los ejes X, Y y Z.
- scaleX(x): Especifica la transformación de escala a lo largo del eje X.
- scaleY(y): Especifica la transformación de escala a lo largo del eje Y.
- scaleZ(z): Especifica la transformación de escala a lo largo del eje Z.
- scale3d(x, y, z): Especifica la transformación de escala a lo largo de los ejes X, Y y Z.
- sesgo(ángulo, ángulo): Especifica la transformación de sesgo a lo largo de los ejes X e Y correspondientes a los ángulos de sesgo.
- skewX(angle) : Especifica la transformación de sesgo junto con el eje X correspondiente al ángulo de sesgo.
- skewY(angle) : Especifica la transformación de sesgo junto con el eje Y correspondiente al ángulo de sesgo.
- skewZ(angle) : Especifica la transformación de sesgo junto con el eje Z correspondiente al ángulo de sesgo.
- perspectiva(x) : Especifica la perspectiva de un elemento. Consulte: propiedad de perspectiva
- initial : Inicializa el elemento a su valor por defecto.
- heredar : hereda el valor de su elemento padre.
Ejemplo 1: Sin la propiedad transform.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe el valor de la propiedad Matrix().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: matrix(1, 0, -1, 1, 1, 0);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo describe el valor de la propiedad Matrix3d().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
transform-style: preserve-3d;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform-style: preserve-3d;
position: absolute;
transform: translate(150px, 75%, 5em)
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo describe el valor de la propiedad translate().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: translate(150px, 65%);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo describe el valor de la propiedad translate3d().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: translate(150px, 65%, 5em);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 6: Este ejemplo describe el valor de la propiedad translateX().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: translateX(150px);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 7: Este ejemplo describe el valor de la propiedad translateY().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: translateY(150px);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 8: Este ejemplo describe el valor de la propiedad translateZ().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: translateZ(150px);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 9: Este ejemplo describe el valor de propiedad de rotate().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 10: Este ejemplo describe el valor de la propiedad giratorioX().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: rotateX(75deg);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 11: Este ejemplo describe el valor de la propiedad giratorioY().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: rotateY(75deg);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 12: Este ejemplo describe el valor de la propiedad giratorioZ().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: rotateZ(75deg);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 13: Este ejemplo describe el valor de la propiedad scale().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: scale(1, 2);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 14: Este ejemplo describe el valor de la propiedad scale3d().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: scale3d(2, 1, 5);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 15: Este ejemplo describe el valor de la propiedad scaleX().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: scaleX(2);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 16: Este ejemplo describe el valor de la propiedad scaleY().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: scaleY(2);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 17: Este ejemplo describe el valor de la propiedad scaleZ().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: scaleZ(2);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 18: Este ejemplo describe el valor de la propiedad skew().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: skew(30deg, 30deg);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 19: Este ejemplo describe el valor de la propiedad skewX().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: skewX(30deg);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 20: Este ejemplo describe el valor de la propiedad skewY().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: skewY(30deg);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 21: Este ejemplo describe el valor de propiedad de la perspectiva().
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: perspective(30px);
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 22: Este ejemplo describe el valor de la propiedad inicial.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: initial;
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 23: Este ejemplo describe el valor de la propiedad heredada.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
transform: rotateX(45deg);
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: inherit;
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Nota: A veces, los valores 3D no dan la salida correcta cuando se usan en elementos 2D, por lo tanto, no se recomienda usar valores 3D para elementos 2D.
Navegadores compatibles: los navegadores compatibles con la propiedad de transformación se enumeran a continuación:
- Transformaciones 2-D:
- Chrome 36.0, 4.0 -webkit-
- Borde 10.0, 9.0 -ms-
- Firefox 16.0, 3.5 -moz-
- Safari 9.0, 3.2 -webkit-
- Opera 23.0, 15.0 -webkit-, 10.5 -o-
- Transformaciones 3-D:
- Chrome 36.0, 12.0 -webkit-
- Borde 12.0
- Firefox 10.0
- Safari 9.0, 4.0 -webkit-
- Opera 23.0, 15.0 -webkit-
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA