Propiedad transform de CSS
La propiedad CSS transform aplica una transformación 2D o 3D a un elemento. Es una de las propiedades CSS3. Esta propiedad permite rotar, sesgar, escalar o trasladar un elemento. Acepta el valor none o una de las funciones de transformación.
INFO
Las transformaciones se pueden aplicar a cualquier elemento, incluidos elementos de bloque, flex, grid e inline.
| Valor inicial | none |
|---|---|
| Se aplica a | Elementos transformables. |
| Heredable | No. |
| Animable | Sí. |
| Versión | CSS3 |
| Sintaxis DOM | Object.style.transform = "rotate(10deg)"; |
Sintaxis
Valores de transform en CSS
transform: none | transform-functions | initial | inherit;Ejemplo de la propiedad transform:
Ejemplo de código de transform en CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px dashed #666;
background-color: #8ebf42;
transform: translate(10px, 40px) rotate(50deg);
width: 130px;
height: 80px;
}
</style>
</head>
<body>
<h2>Transform property example</h2>
<div>An element</div>
</body>
</html>Resultado
Ejemplo de la propiedad transform con los valores "rotate", "skewY", "scaleY", "translateX", "skew":
Ejemplo de varios valores de transform en CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 35px 20px;
}
div.box1 {
width: 130px;
height: 80px;
border: 1px solid #000;
background-color: #1c87c9;
transform: rotate(30deg);
}
div.box2 {
width: 120px;
height: 80px;
border: 1px solid #000;
background-color: #8ebf42;
transform: skewY(30deg);
}
div.box3 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #FFFF00;
transform: scaleY(1.5);
}
div.box4 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #ccc;
transform: rotate(160deg);
}
div.box5 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #990099;
transform: translateX(50px);
}
div.box6 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #FF0000;
transform: skew(170deg, 170deg);
}
</style>
</head>
<body>
<h2>Transform property example</h2>
<h3>transform: rotate(30deg):</h3>
<div class="box1"></div>
<h3>transform: skewY(30deg):</h3>
<div class="box2"></div>
<h3>transform: scaleY(1.5):</h3>
<div class="box3"></div>
<h3>transform: rotate(160deg):</h3>
<div class="box4"></div>
<h3>transform: translateX(50px):</h3>
<div class="box5"></div>
<h3>transform: skew(170deg,170deg):</h3>
<div class="box6"></div>
</body>
</html>El valor "skew"
El valor de transformación skew() se utiliza para inclinar un elemento a lo largo del eje x y del eje y. Los valores de transformación skewX() y skewY() se utilizan para inclinar un elemento a lo largo del eje x o del eje y.
El valor "rotate"
Con el valor rotate(), el elemento se rota en sentido horario desde su posición original. Usar un valor negativo lo rota en la dirección opuesta.
El valor "translate"
El valor translate() mueve el elemento hacia arriba o hacia abajo, así como lateralmente. Se presentan más valores a continuación.
Valores
| Valor | Descripción | Probar |
|---|---|---|
| none | No se aplica ninguna transformación. | Probar » |
| translate() | Traslada el elemento mediante un vector [tx, ty]. Tx es la traslación a lo largo del eje x. Ty es la traslación a lo largo del eje y. | Probar » |
| translateX() | Traslada el elemento a lo largo del eje x. | Probar » |
| translateY() | Traslada el elemento a lo largo del eje y. | Probar » |
| scale(x, y) | Escala un elemento hacia arriba o hacia abajo. | Probar » |
| scaleX() | Escala un elemento a lo largo del eje x. | Probar » |
| scaleY() | Escala un elemento a lo largo del eje y. | Probar » |
| rotate(angle) | Rota un elemento en un espacio bidimensional. El ángulo se especifica en el parámetro. | Probar » |
| skew() | Define una transformación de sesgo 2D a lo largo del eje x y del eje y. | Probar » |
| skewX() | Define una transformación de sesgo 2D a lo largo del eje x. | Probar » |
| skewY() | Define una transformación de sesgo 2D a lo largo del eje y. | Probar » |
| matrix() | Define una transformación 2D, utilizando una matriz de seis valores. | Probar » |
| translateZ() | Traslada un elemento una cantidad dada a lo largo del eje z. | |
| translate3d() | Define una traslación tridimensional. | |
| scaleZ() | Escala un elemento en la tercera dimensión, a lo largo del eje z. | |
| scale3d() | Define una transformación de escala tridimensional. | |
| rotateX() | Rota un elemento alrededor del eje x en un espacio tridimensional. | Probar » |
| rotateY() | Rota un elemento alrededor del eje y en un espacio tridimensional. | Probar » |
| rotateZ() | Rota un elemento alrededor del eje z en un espacio tridimensional. | Probar » |
| rotate3d() | Define una transformación de rotación tridimensional. | |
| matrix3d() | Define una transformación 3D, utilizando una matriz 4x4 de 16 valores. | |
| perspective() | Define una vista en perspectiva para el elemento tridimensional. | |
| initial | Hace que la propiedad use su valor predeterminado. | |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál de las siguientes afirmaciones es incorrecta sobre la propiedad transform?