Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS Transformaciones 3D


CSS3 Transformaciones 3D

CSS3 permite dar formato a los elementos que utilizan transformaciones 3D.

Pase el ratón sobre los elementos siguientes para ver la diferencia entre un 2D y 3D una transformación:

gire 2D
3D rote

Soporte del navegador para Transformaciones 3D

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 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-

CSS3 Transformaciones 3D

En este capítulo aprenderá acerca de los siguientes métodos de transformación 3D:

  • rotateX()
  • rotateY()
  • rotateZ()

El rotateX() Método

Rotar X

El rotateX() método gira un elemento en torno a su eje X en un determinado grado:

Ejemplo

div {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}
Inténtalo tú mismo "

El rotateY() Método

Girar Y

El rotateY() método gira un elemento alrededor de su eje en un grado dado:

Ejemplo

div {
    -webkit-transform: rotateY(130deg); /* Safari */
    transform: rotateY(130deg);
}
Inténtalo tú mismo "

El rotateZ() Método

El rotateZ() método gira un elemento alrededor de su eje Z en un grado dado:

Ejemplo

div {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg);
}
Inténtalo tú mismo "

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 »


CSS3 propiedades de transformación

La siguiente tabla muestra todas las propiedades de transformación 3D:

Propiedad Descripción
transform Se aplica una transformación 2D o 3D a un elemento
transform-origin Le permite cambiar la posición de elementos transformados
transform-style Especifica cómo los elementos anidados se prestan en el espacio 3D
perspective Especifica el punto de vista sobre cómo los elementos 3D son vistas
perspective-origin Especifica la posición inferior de elementos 3D
backface-visibility Define si un elemento debe ser visible sin estar frente a la pantalla

Transformación 3D Métodos

Función Descripción
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
translate3d(x,y,z) Define una traducción en 3D
translateX(x) Define una traducción 3D, utilizando sólo el valor para el eje X
translateY(y) Define una traducción 3D, utilizando sólo el valor para el eje Y
translateZ(z) Define una traducción en 3D, utilizando sólo el valor para el eje Z
scale3d(x,y,z) Define una transformación de escala 3D
scaleX(x) Define una transformación de escala 3D dando un valor para el eje X
scaleY(y) Define una transformación de escala 3D dando un valor para el eje Y.
scaleZ(z) Define una transformación de escala 3D dando un valor para el eje Z
rotate3d(x,y,z,angle) Define una rotación 3D
rotateX(angle) Define una rotación 3D lo largo del eje X
rotateY(angle) Define una rotación 3D a lo largo del eje Y
rotateZ(angle) Define una rotación 3D lo largo del eje Z
perspective(n) Define una vista en perspectiva de un elemento transformado en 3D