CSS3 transformar la propiedad
Ejemplos
Rotación elemento div:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
Trate »
Soporte para el navegador
Las cifras de la tabla representan el primer navegador compatible con el número de versión de la propiedad.
Inmediatamente después de la -webkit- digital, -MS- o hace -moz- en apoyo del prefijo atribuyen primer número de la versión del navegador.
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
Definiciones de atributos e instrucciones
Transformar 2D propiedad se aplica al elemento o conversión 3D. Esta propiedad le permite a los elementos rotar, hacer zoom, mover, inclinación, y así sucesivamente.
Para comprender mejor las propiedades de transformación, véase el ejemplo en línea .
| Por defecto: | ninguno |
|---|---|
| herencia: | no |
| Version: | CSS3 |
| la sintaxis de JavaScript: | objetar .style.transform = "rotar (7deg)" |
gramática
transform:none | Transform-funciones;
| valor | descripción |
|---|---|
| ninguno | Definición no convierte. |
| matriz (n, n, n,n, n, n) | Definir conversión de 2D, utilizando una matriz de seis valores. |
| Matrix3D (n, n, n,n, n, n, n, n, n, n, n, n, n, n, n, n) | conversión 3D define utilizando 16 valores matriz de 4x4. |
| traducir(x, y) | Definir la conversión 2D. |
| translate3d(x, y, z) | Definir la conversión 3D. |
| translateX(x) | Definición de la conversión, pero con el valor del eje X. |
| translateY(y) | Definición de la conversión, pero con el valor del eje Y. |
| translateZ(z) | Definir conversión 3D, pero con el valor del eje Z. |
| escala (x [, y]?) | Definir transformación de escala 2D. |
| scale3d(x, y, z) | Definir transformación de escala 3D. |
| scaleX(x) | Al establecer el valor del eje X para definir la transformación de escala. |
| scaleY(y) | Al establecer el valor del eje Y para definir la transformación de escala. |
| scaleZ(z) | Para definir la transformación de escala 3D estableciendo el valor del eje Z. |
| rotación(ángulo) | Definir 2D girado un ángulo predeterminado en el argumento. |
| ROTATE3D (x, y, z,ángulo) | Definir la rotación 3D. |
| rotateX(ángulo) | 3D X se define a lo largo del eje. |
| rotateY(ángulo) | 3D eje Y se define a lo largo de la rotación. |
| rotateZ(ángulo) | El eje Z 3D se define a lo largo de la rotación. |
| oblicuidad (x-ángulo, y-ángulo) | Definido a lo largo del 2D X y la transformación de sesgo eje. |
| skewX(ángulo) | 2D eje X se define a lo largo de la inclinación de la conversión. |
| skewY(ángulo) | Definido a lo largo del eje Y transformación de sesgo 2D. |
| perspectiva(n) | elemento de conversión 3D para definir una vista en perspectiva. |
más ejemplos
Girar una imagen
Este ejemplo muestra cómo crear un "polaroid" fotos y rotar imágenes.