Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. HTML5 Y CSS3
  3. Las transformaciones CSS3
Extrait - HTML5 Y CSS3 Revolucione el diseño de sus sitios web (4a edición)
Extractos del libro
HTML5 Y CSS3 Revolucione el diseño de sus sitios web (4a edición) Volver a la página de compra del libro

Las transformaciones CSS3

Situación actual y objetivos

En 2019, en el momento de escribir este libro, el módulo CSS Transforms Module Level 1 se encuentra aún en Working Draft del 30 de noviembre de 2018. Pese a ser un borrador, los navegadores modernos reconocen bien este módulo.

images/new-042.png

Las transformaciones permiten modificar la visualización de los elementos HTML de una página web con las propiedades CSS.

Una vez que el elemento HTML se publique de manera "tradicional", podrá "soportar" transformaciones de rotación, de desplazamiento, de deformación, de escala y de perspectiva.

La transformación

1. La propiedad

Para aplicar una transformación tendremos que utilizar la propiedad transform. Esta propiedad utilizará a su vez diversas funciones dependiendo de la transformación en cuestión.

2. El punto de referencia

De manera predeterminada, todas las transformaciones tomarán como punto de referencia el centro del elemento. Dicho punto de referencia sirve de valor inicial en los cálculos de las transformaciones.

Este puede cambiarse con la propiedad transform-origin. El valor insertado indicará el nuevo punto de referencia.

Los valores posibles son:

  • Porcentajes: por defecto, el valor es de 50% 50%, es decir, el centro del elemento.

  • Palabras clave: left, center, right, top, center, bottom.

  • Valores expresados en píxeles.

Este sería el resultado de una rotación con el punto de referencia predeterminado, es decir, en el centro del elemento:

images/chap11-016.png

Veamos qué sucedería si se situase el punto de origen en la esquina superior izquierda del elemento, seguido de una rotación:

.rotar { 
    transform-origin: left top; 
    transform: rotate(32deg); 
} 

Este sería el resultado obtenido al modificar el punto de referencia:

images/chap11-017.png

El desplazamiento

1. En los dos ejes

La función translate permite realizar un desplazamiento, una translación, de una distancia determinada, en función de la posición inicial y del punto de referencia.

El siguiente ejemplo desplaza la imagen 250 píxeles horizontalmente y 50 píxeles verticalmente.

.desplazamiento { 
     transform: translate(250px,50px); 
} 

Hemos aplicado la clase a una imagen:

<p><img src="leon.jpg" alt="León" class="desplazamiento" /></p> 

Veamos el resultado de la transformación:

images/chap11-001.png

2. En un eje solamente

Podemos usar las dos funciones de desplazamiento en un único eje:

  • translateX: para un desplazamiento en el eje horizontal,

  • translateY: para un desplazamiento en el eje vertical.

Ejemplo de un desplazamiento horizontal de 20 píxeles:

.desplazamiento { 
     transform: translateX(20px); 
} 

El cambio de escala

1. La escala proporcional

La función scale permite transformar el tamaño de un elemento según una escala de 0 a 1, en la que 1 es el tamaño inicial.

La clase del ejemplo siguiente permite aplicar una transformación proporcional según una escala del 50% con respecto al tamaño inicial.

.escala { 
   transform: scale(.5); 
} 

2. La escala no proporcional

Si indica dos valores, el primero hará referencia al cambio de escala horizontal y, el segundo, al cambio de escala vertical.

En este ejemplo se ha aplicado un cambio de escala del 50% horizontalmente y del 20% verticalmente:

.escala { 
    transform: scale(.5,.2); 
} 

3. El cambio de escala en una única dirección

Puede usar las funciones:

  • scaleX: para el cambio de escala horizontal,

  • scaleY: para el cambio de escala vertical.

En este ejemplo, el cambio de la escala es exclusivamente horizontal:

.escala { 
    transform: scaleX(.5); 
} 

La rotación

La función rotate permite girar un elemento. La unidad se puede expresar en grados deg o en radianes rad.

Este es un ejemplo de una rotación de 23 grados:

.rotar { 
    transform: rotate(23deg); 
} 

El resultado de la transformación:

images/chap11-002.png

La deformación

1. La deformación en los dos ejes

La función skew permite deformar el elemento en los dos ejes. La unidad puede expresarse en grados deg o en radianes rad.

Este es un ejemplo de una deformación horizontal de 20 grados y una deformación vertical de 5 grados:

.deformar { 
transform: skew(20deg,-5deg); 
} 

El resultado de la transformación:

images/chap11-003.png

2. La deformación en un único eje

Podrá usar las funciones:

  • skewX: para la deformación horizontal,

  • skewY: para la deformación vertical.

En este ejemplo, la transformación es exclusivamente horizontal:

.deformar { 
transform: skewX(-20deg); 
} 

El resultado visual:

images/chap11-004.png

Aplicar todas las transformaciones

Es posible aplicar tantas transformaciones como queramos, bastará con que indiquemos las funciones que queramos usar.

Veamos un ejemplo con todas las transformaciones:

.transformar { 
 transform: scale(.7) rotate(3deg) translateX(5px) skewX(-5deg); 
} 

Así se verá en la pantalla:

images/chap11-005.png

Los generadores en línea

Existen multitud de generadores en línea que le ayudarán a redactar su código CSS3 para que sea compatible con los navegadores habituales.

1. CSS 3.0 Maker

CSS 3.0 Maker (https://www.css3maker.com/css3-transform.html) le permite aplicar las cuatro transformaciones que acabamos de ver:

images/chap11-008.png

2. CSS3 Generator

CSS3 Generator (https://www.css3generator.com/) le permite acceder a las transformaciones a través de la opción Transform.

images/OWT09-02.png

3. WestCIV

WestCIV (http://www.westciv.com/tools/transforms/index.html) le permite acceder a todas las transformaciones que hemos presentado.

images/OWT09-03.png

Un menú de ejemplo

1. Objetivo

Vamos a crear un menú simple compuesto de iconos. Al pasar el ratón por encima de dichos vínculos, las imágenes se ampliarán, al mismo tiempo que girarán ligeramente y que mostrarán una deformación horizontal.

2. La estructura del menú

El menú utilizará la clásica lista ul:

<ul id="menu"> 
    <li><a href="#"><img src="twitter.png" alt="twitter" /> 
</a></li> 
    <li><a href="#"><img src="facebook.jpg" alt="facebook" /> 
</a></li> 
    <li><a href="#"><img src="flickr.png" alt="flickr" /> 
</a></li> 
</ul> 

3. El diseño

Los elementos li presentarán los estilos de diseño "habituales":

#menu li { 
    list-style: none; 
    display: inline-block; 
    margin-right: 20px; 
} 

Cada imagen (img) se transformará cuando se pase el cursor por encima del vínculo (a:hover). Se le aplicará un cambio de escala (scale), una rotación (rotation) y un desplazamiento (translate).

#menu li a:hover img { 
    transform:...

Ejemplo de una galería Polaroid

1. Objetivo

Vamos a crear un álbum de fotos "vintage", de estilo Polaroid, con algunas fotografías sobre "una mesa". Cuando se pase el ratón por encima de una de las fotos, esta se situará por encima de las demás, con un fondo más claro y una sombra más pronunciada.

Este ejemplo retoma en gran medida el del sitio web: http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery

2. La estructura de la galería

Vamos a crear la estructura en HTML5, con los elementos section, figure y figcaption. El elemento section presenta un código de identificación y cada elemento figure dispone de una clase.

<section id="galeria"> 
    <figure class="pic-1"> 
        <img src="foto1.jpg" alt="Hipopótamo" /> 
        <figcaption>Hipopótamo</figcaption> 
    </figure> 
    <figure class="pic-2"> 
        <img src="foto2.jpg" alt="Tigre" /> 
        <figcaption>Tigre</figcaption> 
    </figure> 
    <figure...

Ejemplo de una imagen con relieve

1. Objetivo

Queremos obtener el aspecto de una sombra debajo de una fotografía con los bordes ligeramente inclinados. La técnica está "chupada" (¡solamente había que tener la idea!). Vamos a usar una sombra, a la que le vamos a aplicar una rotación.

Esta técnica se inspira en un ejemplo propuesto en un sitio que actualmente ya no está accesible.

2. La fotografía

La imagen de la fotografía se encuentra dentro de una caja <div> con un código de identificación:

<div id="foto"> 
    <img src="caminata.jpg" alt="Panorama" /> 
</div> 

Vamos a aplicar ahora un estilo muy sencillo, por diversión... Pero, sobre todo, porque tenemos que posicionar la caja <div>.

#foto { 
    position: relative; 
    margin: 20px auto; 
    width: 500px; 
    height: 140px; 
    padding: 10px; 
    border: 1px solid #ccc; 
    background-color: #eee; 
} 

El resultado visual obtenido inicialmente:

images/chap11-013.png

3. La sombra bajo la fotografía

Para "insertar" una sombra debajo de la foto, vamos a usar las dos pseudo-clases :before y :after. Estas permiten añadir contenido delante y detrás...