¿Cómo transformar objetos con css3

En CSS3, un transformar cambia la apariencia de los objetos que aparecen en pantalla de una manera específica. Por ejemplo, es posible rotar el objeto o sesgar sus dimensiones. Transforma hacen que sea fácil para crear presentaciones únicas de objetos comunes - efectos que normalmente se necesitaría una diseñador o artista gráfico para crear para usted. La siguiente lista describe los tipos de transformaciones que se pueden realizar.

• matriz (a, b, c, d, tx, ty): Tuerce el objeto utilizando una matriz definida por los puntos a, b, c, y d. A continuación, se traduce la posición del objeto en la pantalla por un valor denotado por tx y ty. (Usted puede tratar de la matriz () transformar cabo a w3schools.com.)

  Hay versiones de muchas de estas funciones que trabajan en objetos tridimensionales. Por ejemplo, hay una función Matrix3D (). Estas funciones añaden una z-eje de la ecuación, por lo que se puede manipular objetos tridimensionales en el espacio tridimensional. Usted puede leer más acerca de cómo las versiones 3D funcionan en Mozilla Developer CSS-Tricks Red y.

• traducir (tx, ty), translateX (tx), translateY (TY): Modifica la posición del objeto en la pantalla por una cantidad horizontal definido por tx, una cantidad vertical definido por Ty, o ambos. (Usted puede probar el traducen () transformar en w3schools.com.)

• escala (x, y), scaleX (x), scaleY (y): Estira el objeto horizontalmente en la cantidad especificada por x, verticalmente por la cantidad especificada por y, o ambos. (Usted puede tratar de la escala () transformar en w3schools.com.)

• rotación (ángulo), rotateX (ángulo), rotateY (ángulo): Gira el objeto por el número de grados especificados en el eje deseado. (Usted puede probar la rotación () transformar en w3schools.com.)

  Internet Explorer no es compatible con todas las transformaciones. Por ejemplo, usted encontrará que Internet Explorer 9 no es compatible con los rotateX () y rotateY () funciones.

• skew (angleX, Angley), skewX (angleX), skewY (Angley): Tuerce el objeto por el número de grados horizontalmente especificados por angleX, el número de grados especificado verticalmente por Angley, o ambos. (Usted puede tratar de la inclinación () transformar en w3schools.com.)

La mejor manera de entender estas transformaciones es verlos en acción. El siguiente procedimiento le ayuda a crear una aplicación de ejemplo que muestra las transformaciones que se pueden realizar.

1. Crear un nuevo archivo de HTML5 con su editor de texto.

2. Escriba el siguiente código de la página HTML.

   Matrix
   Traducir
   Nivel
   Girar
   Girar Y
   Skew

   El ejemplo muestra las transformaciones que figuran como párrafos. Puede probar otras transformaciones modificando el ejemplo (Móvil).

3. Guarde el archivo como Transforms.HTML.

4. Crear un nuevo archivo CSS con su editor de texto.

5. Escriba la siguiente información de estilo CSS.

   #Matrix {Border: sólido-border-color: Negro-border-width:-font-size delgada: 30px; margen: 50px; ancho: 140px; altura: 40px; transform: matriz (0.866,0.5,0.4,0.866,5 , 15) - ms-transformar: matriz (0.866,0.5,0.4,0.866,5,15) - webkit-transform: matriz (0.866,0.5,0.4,0.866,5,15) -} # Traducir {border: sólido-border-color: Negro-border-width:-font-size delgada: 30px; margen: 50px; ancho: 140px; altura: 40px; transform: translate (20px, 30px) - ms-transform: translate (20px, 30px) - webkit-transform: translate (20px, 30px) -} # Escala {border: sólido-border-color: Negro-border-width:-font-size delgada: 30px; margen: 50px; ancho: 140px; altura : 40px; transform: escala (1.6, 0.75) - ms-transformar: Escala (1.6, 0.75) - webkit-transform: Escala (1.6, 0.75) -} # Girar {border: de color sólido de las fronteras: Black- border-width:-font-size delgada: 30px; margen: 50px; ancho: 140px; altura: 40px; transform: rotate (140deg) - ms-transform: rotate (140deg) - webkit-transform: rotate (140deg) -} # RotateY {border: sólido-border-color: Negro-border-width:-font-size delgada: 30px; margen: 50px; ancho: 140px; altura: 40px; transform: rotateY (140deg) - ms-transforman : rotateY (140deg) - webkit-transform: rotateY (140deg) -} # Skew {border: sólido-border-color: Negro-border-width:-font-size delgada: 30px; margen: 50px; ancho: 140px; altura: 40px; transform: inclinación (15deg, 30deg) - ms-transformar: inclinación (15deg, 30deg) - webkit-transform: inclinación (15deg, 30deg) -}

   Cada una de estas transformaciones utiliza exactamente el mismo formato de párrafo para que pueda entender mejor cómo funcionan. El uso de una frontera hace que sea más fácil de entender la transformación ya que la combinación de las palabras y un objeto en pantalla transmiten más información (algo para recordar al crear sus propias aplicaciones de prueba).

   Transformadas se consideran experimentales, a pesar de que aparecen como parte de la especificación. Con el fin de usarlos con Internet Explorer 9+, debe incluir el prefijo -MS-. Tanto Safari y Chrome requieren el prefijo -webkit-. Es por esto que se ve cada transformada aparece tres veces. Las transformaciones también deben trabajar tanto con Opera y Firefox sin ningún problema.

6. Guarde el archivo como Transforms.CSS.

7. Cargue el ejemplo transforma.

   Usted ve los efectos de transformación. Todas estas transformaciones están utilizando el mismo tipo de letra, tamaño de fuente y tamaño de la caja, por lo que las diferencias que se ven se deben únicamente al lugar de transformación tomando. Observe que la transformación rotateY () en realidad muestra el texto hacia atrás.

   

   Trate de modificar los valores transformar para ver cómo los cambios afectan a la salida. Usted se sorprenderá al ver lo flexible de estas funciones son.

Es posible combinar las transformaciones para crear efectos aun más inusuales. Simplemente les separar con un espacio. Por ejemplo, para combinar una rotación () con una inclinación (), que le escriba transform: rotar (25deg) sesgo (15deg, 30deg) -.