Conversión CSS3 3D
Transformaciones 3D
CSS3 permite el uso de 3D para dar formato a elementos de conversión.
En este capítulo, usted aprenderá algunos de los métodos de conversión 3D:
- rotateX ()
- rotateY ()
Haga clic en los siguientes elementos para ver la diferencia entre 2D y 3D Conversión Conversión entre:
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 | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
rotateX método ()
método rotateX (), cuyos elementos alrededor de un determinado número de grados de rotación en el eje X.
Ejemplos
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
Trate »
rotateY método ()
método rotateY (), cuyos elementos alrededor de un determinado número de grados de rotación en el eje y.
Ejemplos
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
Trate »
Recursos de conversión
La siguiente tabla muestra todas las propiedades de transformación:
| propiedad | descripción | CSS |
|---|---|---|
| transformar | Aplicada al elemento 2D o 3D de conversión. | 3 |
| transformar origen | Se le permite cambiar la posición del elemento que se desea convertir. | 3 |
| transformar al estilo | Disposición era cómo los elementos anidados que se muestran en el espacio 3D. | 3 |
| perspectiva | Disposiciones de elementos de efecto de perspectiva 3D. | 3 |
| perspectiva origen | Una posición predeterminada de la parte inferior del elemento de 3D. | 3 |
| del frente de refuerzo visibilidad | Definir los elementos cuando no esté en la cara de la pantalla es visible. | 3 |
método de conversión 3D
| función | descripción |
|---|---|
| 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. |
| translate3d(x, y, z) | Se define la transformación 3D. |
| translateX(x) | Definir conversión 3D, utilizando únicamente los valores para el eje X. |
| translateY(y) | Definir conversión 3D, utilizando únicamente los valores para el eje Y. |
| translateZ(z) | Definir conversión 3D, utilizando únicamente los valores para el eje Z. |
| scale3d(x, y, z) | Definir transformación de escala 3D. |
| scaleX(x) | transformación de escala 3D se define por un valor dado de X-eje. |
| scaleY(y) | transformación de escala 3D se define por un valor dado de Y-eje. |
| scaleZ(z) | transformación de escala 3D se define por un valor dado de eje Z. |
| ROTATE3D (x, y, z,ángulo) | Definir la rotación 3D. |
| rotateX(ángulo) | Definido a lo largo del eje de rotación X 3D. |
| rotateY(ángulo) | Definido a lo largo del eje de rotación Y 3D. |
| rotateZ(ángulo) | Definido a lo largo del eje de rotación Z 3D. |
| perspectiva(n) | vista en perspectiva en 3D de la definición del elemento de conversión. |