Cómo crear transformaciones con CSS 3

Cómo crear transformaciones con CSS 3 - dummies

CSS 3 le permite crear muchos efectos interesantes en su sitio web para mostrarlos en el iPhone y el iPad. Las propiedades de transformación CSS 3 le permiten transformar un elemento para crear efectos en 2D y 3D. Puede especificar una lista de transformaciones para cambiar múltiples aspectos de un elemento. Si se especifican múltiples opciones, cada una se aplica en el orden indicado.

Las opciones de transformación incluyen las que se describen en esta lista:

  • scale - Cambia la altura y el ancho de un elemento. Puede especificar dos números para definir una escala diferente para ancho y alto. Sin embargo, este elemento generalmente se usa con un solo número para escalar proporcionalmente un elemento. El primero de los siguientes ejemplos transforma el elemento a escala a la mitad de su tamaño, y el segundo transforma el elemento a la mitad de ancho y el doble de alto:

     -webkit-transform: scale (0. 5); -webkit-transform: scale (2, 0. 5); 
  • traducir - Use esta propiedad para traducir , o mover, un elemento de la posición A a la posición B por igual a lo largo de los ejes xey. También puede usar translateX y translateY para mover elementos a lo largo de solo un eje a la vez. Por ejemplo, este código hace que un elemento se mueva 150 píxeles desde la izquierda y 150 desde la parte superior:

     -webkit-transform: translate (150px, -150px); 
  • sesgo: utilice esta propiedad para sesgar , o cambiar la posición de un elemento en función de un valor específico que sesga un elemento en los ejes xey. Por ejemplo, esto podría sesgar un elemento 20 grados en el eje x:

     -webkit-transform: skew (15deg, 4deg); 
  • rotar - Use esta propiedad para rotar , o cambiar la posición de un elemento en función de un valor específico que controle el ángulo de rotación. Por ejemplo, el primer ejemplo en este código gira un elemento 5 grados a la derecha, el segundo gira el elemento -5 (negativo 5) grados.

    Como puede ver en la figura, hace que las fotos de la derecha e izquierda de este diseño se alejen de la imagen central:

     -webkit-transform: rotate (5deg); -webkit-transform: rotate (-5deg); 

En el ejemplo de sitio de SCUBA que se muestra en esta figura, observe que las dos imágenes exteriores giran hacia la izquierda y hacia la derecha, respectivamente, utilizando la función de Giro de CSS, pero solo en Safari, Firefox y Chrome. Visita esta página con IE y las cajas están todas en línea recta, pero no se ven mal de esa manera, por lo que no hay daños.

Observe también que hay una imagen escondida en la parte inferior del diseño, de modo que cuando convierte el iPad / iPhone en horizontal en vista vertical, el contenido llena toda la pantalla.