Cómo utilizar transformaciones css3

CSS3 incluye la posibilidad de aplicar transformaciones geométricas a cualquier elemento en su página web HTML5. Esto proporciona un notable nivel de control visual que anteriormente no disponibles para los desarrolladores web.

los transformar atributo le permite aplicar una transformación matemática a cualquier div. Cuando se aplica transformar a un elemento, es necesario aplicar uno o más de los siguientes parámetros para describir el tipo de transformación:

traducir: Mueve el objeto a partir de su posición predeterminada. La traducción requiere dos parámetros, una medición X y una medición Y. Utilizar las unidades de medida estándar CSS.
girar: Gira la imagen en torno a su valor central. Toma un parámetro, una medición de ángulo en grados. (Por ejemplo, 30 grados es 30deg.)
escala: Cambia el tamaño del objeto. Los cambios de versión estándar tanto el tamaño horizontal y vertical de manera uniforme. los scaleX y scaley atributos pueden ser utilizados para ajustar la escala a lo largo de un eje individual. Escala se mide en las unidades de medida CSS estándar. Si la escala es mayor que 1, el objeto es mayor que el original. Una escala entre cero y uno hace que el elemento más pequeño de lo que era.
sesgar: Esto le permite inclinar el elemento por algún ángulo. El parámetro requiere una medición de ángulo en grados. los skewX y skewy variaciones permiten un control más completa de la transformación.

Video: CSS Transform Property in 5 Minutes

Se pueden combinar múltiples parámetros, mediante su inclusión después del atributo transformar separados por espacios.

Para ilustrar, imagine el siguiente fragmento de HTML:

Video: CSS Transition, Transform, Animations

cuadro 1
 cuadro 2
Video: Transformaciones en CSS3
 cuadro 3
 cuadro 4
 cuadro 5

El código de muestra de cinco idéntica divs. Con fines ilustrativos, todas las divs compartir el mismo CSS común:

Video: Transformaciones en CSS3 - 3 - Preparando el Entorno de Trabajo

# Box1, # box2, # box3, # box4, # box5 {width: 100px; altura: 80px; frontera: 3px sólido negro-background-color: amarillo-}

Aplicar las variaciones de los atributos de cada elemento para ver cómo funcionan las transformaciones.

# Caja2 {transformar: traducir (100px, 0px) -} # box3 {transform: rotate (45 grados) -} # box4 {transformar: la escala (2) traducir (100px, 0px) -} # box5 {transformar: inclinación (3) -}

Tenga en cuenta que el apoyo del navegador está cambiando en este elemento. Chrome y Safari todavía esperan que el -webkit prefijo, pero Firefox y Opera soportan la versión sin prefijo. Es decir, 10 en teoría funciona con la versión estándar, pero requiere la versión 9 del -Sra- prefijo, y versiones anteriores de IE simplemente ignoran transformaciones por completo. Si ve el código fuente real del sitio transform.html, verá múltiples versiones para manejar los diferentes navegadores:

 # Caja2 {transformar: traducir (100px, 0px) - webkit-transform: translate (100px, 0px) - MS-transform: translate (100px, 0px) -}

Con el tiempo, el sentido común se romperá y prefijos específicos del proveedor ya no será necesario, pero por el momento, lo más seguro es poner a todos en su lugar. Si se desea capturar versiones anteriores de Firefox y Opera, también se pueden incluir estos (-moz-y -o-) Prefijos también.