Ejemplo
Girar un <div> elemento:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Inténtalo tú mismo " Definición y Uso
La propiedad transform aplica una transformación 2D o 3D a un elemento. Esta propiedad le permite rotar, escalar, mover, inclinación, etc., elementos.
Para entender mejor la propiedad transform, ver una demostración .
| Valor por defecto: | none |
|---|---|
| Heredado: | no |
| animatable: | yes. Read about animatable Try it |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.transform="rotate(7deg)" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -moz-, o -O- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| transform (2D) | 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 (3D) | 36.0 12.0 -webkit- | 12.0 | 10.0 | 16.0 10.0 -moz- | 9.0 4.0 -webkit- |
Sintaxis
transform: none|transform-functions|initial|inherit;Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| none | Define que no debe haber ninguna transformación | Juegalo " |
| matrix( n,n,n,n,n,n ) | Define una transformación 2D, utilizando una matriz de seis valores | Juegalo " |
| matrix3d ( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) | Define una transformación 3D, utilizando una matriz de 4x4 de 16 valores | |
| translate( x,y ) | Define una traducción 2D | Juegalo " |
| translate3d( x,y,z ) | Define una traducción en 3D | |
| translateX( x ) | Define una traducción, utilizando sólo el valor para el eje X | Juegalo " |
| translateY( y ) | Define una traducción, utilizando sólo el valor para el eje Y | Juegalo " |
| translateZ( z ) | Define una traducción en 3D, utilizando sólo el valor para el eje Z | |
| scale( x,y ) | Define una transformación de escala 2D | Juegalo " |
| scale3d( x,y,z ) | Define una transformación de escala 3D | |
| scaleX( x ) | Define una transformación de escala, dando un valor para el eje X | Juegalo " |
| scaleY( y ) | Define una transformación de escala, dando un valor para el eje Y. | Juegalo " |
| scaleZ( z ) | Define una transformación de escala 3D dando un valor para el eje Z | |
| rotate( angle ) | Define una rotación 2D, el ángulo se especifica en el parámetro | Juegalo " |
| rotate3d( x,y,z,angle ) | Define una rotación 3D | |
| rotateX( angle ) | Define una rotación 3D lo largo del eje X | Juegalo " |
| rotateY( angle ) | Define una rotación 3D a lo largo del eje Y | Juegalo " |
| rotateZ( angle ) | Define una rotación 3D lo largo del eje Z | Juegalo " |
| skew( x-angle,y-angle ) | Define una transformación de sesgo 2D a lo largo de los ejes X y el eje Y | Juegalo " |
| skewX( angle ) | Define una transformación de sesgo 2D lo largo del eje X | Juegalo " |
| skewY( angle ) | Define una transformación de sesgo 2D a lo largo del eje Y | Juegalo " |
| perspective( n ) | Define una vista en perspectiva de un elemento transformado en 3D | |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Imágenes proyectadas sobre la mesa
Este ejemplo muestra cómo crear "polaroid" imágenes y rotar las imágenes.
Páginas relacionadas
CSS tutorial: las transformaciones CSS 2D
CSS tutorial: CSS transformaciones 3D
Referencia HTML DOM: transform property