Definición de .transform en CSS
La propiedad .transform le permite manipular visualmente un elemento sesgando, girando, traduciendo o escala:
Ejemplo de empleo de la propiedad transform
Si te gustaría utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de esta manera:
.element {
width: 20px;
height: 20px;
transform: scale(20);
}Otro ejemplo más avanzado de .transform es el siguiente de CODEPEN:
Sintaxis de .transform en CSS
transform: none|transform-functions|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| ninguna | Define que no debe haber transformación | |
| matriz( n,n,n,n,n,n ) | Define una transformación 2D, usando una matriz de seis valores | |
| matriz3d ( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) | Define una transformación 3D, usando una matriz 4×4 de 16 valores | |
| traducir ( x, y ) | Define una traducción 2D | |
| traducir3d( x,y,z ) | Define una traducción 3D | |
| traducirX( x ) | Define una traducción, usando solo el valor para el eje X | |
| traducirY( y ) | Define una traducción, usando solo el valor para el eje Y | |
| traducirZ( z ) | Define una traslación 3D, usando solo el valor para el eje Z | |
| escala( x,y ) | Define una transformación de escala 2D | |
| escala3d( x,y,z ) | Define una transformación de escala 3D | |
| escalaX( x ) | Define una transformación de escala dando un valor para el eje X | |
| escalaY( y ) | Define una transformación de escala dando un valor para el eje Y | |
| escalaZ( z ) | Define una transformación de escala 3D dando un valor para el eje Z | |
| girar ( ángulo ) | Define una rotación 2D, el ángulo se especifica en el parámetro | |
| rotar3d( x,y,z,ángulo ) | Define una rotación 3D | |
| rotarX( ángulo ) | Define una rotación 3D a lo largo del eje X | |
| rotar Y ( ángulo ) | Define una rotación 3D a lo largo del eje Y | |
| rotarZ ( ángulo ) | Define una rotación 3D a lo largo del eje Z | |
| sesgo ( ángulo x, ángulo y ) | Define una transformación de sesgo 2D a lo largo de los ejes X e Y | |
| sesgoX( ángulo ) | Define una transformación de sesgo 2D a lo largo del eje X | |
| sesgado Y ( ángulo ) | Define una transformación de sesgo 2D a lo largo del eje Y | |
| perspectiva ( n ) | Define una vista en perspectiva para un elemento transformado en 3D | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .transform
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -o- |
| transform-origin (three-value syntax) | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |
