UNIVERSIDAD PEDAGÓGICA NACIONAL FRANCISCO
MORAZÁN
“PROGRAMA DE FORMACIÓN PERMANENTE”
Centro de Practica:
Instituto Gubernamental Tecnológico en Administración de Empresas
Docente Practicante:
Nahun Ely Martinez Leiva
Clase:
Diseño Web I
Tema:
Posicionamiento con CSS
Fecha:
29/06/2020
Tema: Transiciones y Transformaciones
Las CSS3 Transitions (transiciones CSS) son efectos que producen cambios en las
propiedades de los estilos aplicados en nuestras hojas de estilo. Se suelen usar, por ejemplo,
para que un efecto en la propiedad: hover (que un enlace cambie de color al pasar el ratón
por encima) suceda suavemente y a lo largo de un tiempo determinado en lugar de suceder
instantáneamente, que es el comportamiento por defecto.
Las CSS3 Transforms (transformaciones CSS) son propiedades que definen cómo los
elementos pueden transformarse en el espacio bidimensional o tridimensional. Estos efectos
pueden ser rotar, cambiar de escala, moverse...
Las transiciones permiten especificar:
• transition-property: la propiedad CSS sobre la que actuar,
• transition-duration: la duración del efecto,
• transition-timing-function: especifica como cambia el ritmo de la
transición a lo largo de su duración,
• transition-delay: especifica el retraso con el que queremos que empiece la
transición.
En nuestro caso vamos a aplicar esta transición:
• transition-property: all ('all' significa que aplicamos a todas las
propiedades css que aceptan transiciones)
• transition-duration: 1s ('s' en segundos o 'ms' en milisegundos)
• transition-timing-function: ease-in-out (hay 5 opciones con
diferentes parámetros en una función con 4 puntos de control)
• transition-delay: 0s (significa que no tiene retraso y actua
inmediatamente)
Podemos definir todos los parámetros de una sola vez de la siguiente manera:
transition = <transition-property> <transition-duration>
<transition-timing-function> <transition-delay>
En nuestro ejemplo sería:
transition: all 1s ease-in-out 0s;
El soporte de los diferentes navegadores es desigual. Por eso tendremos que repetir la
propiedad pensando en cada uno de ellos:
• -webkit-transition: para los navegadores Safari 3.2, Chrome 4.0 en
adelante y Opera 15.0
• -moz-transition: para el navegador Firefox 4.0 en adelante
• -o-transition: para el navegador Opera 10.5
• -ms-transition: para el navegador IE9
La mejor manera de saber si nuestras transformaciones funcionarán o no en la mayoría de
navegadores o si debemos usar las extensiones propietarias es consultando en el sitio web:
[Link]
Escalado.
Para escalar un elemento podemos aplicar la transformación a los 2 ejes a la vez
transform: scale(n) donde n define la proporción a escalar, o en diferentes
proporciones para cada eje con transform: scale(x,y). Valores positivos agrandan el
elemento en proporción a la dimensión inicial, y valores negativos lo reducen.
En nuestro ejemplo queremos que la rotación sea pequeña y hacia la izquerda, o sea, en el
sentido contrario a las agujas del reloj. Para eso definimos la siguiente propiedad
transform:rotate(-10deg);
El escalado también queremos que sea para agrandar el objeto proporcionalmente de forma
sutil, pongamos un 20% más sobre su tamaño inicial. Para eso definimos
transform:scale(1.2);
Como en el caso de las propiedades de las transiciones, también podemos encadenar
diferentes transformaciones:
transform:rotate(-10deg) scale(1.2);
Como en el caso anterior, para asegurarnos el correcto soporte por parte de los diferentes
navegadores usaremos los prefijos correspondientes:
transform:rotate(-10deg) scale(1.2);
-webkit-transform:rotate(-10deg) scale(1.2);
-moz-transform:rotate(-10deg) scale(1.2);
-o-transform:rotate(-10deg) scale(1.2);
-ms-transform:rotate(-10deg) scale(1.2);
Transiciones y transformaciones en acción
Ahora que sabemos como funcionan las transiciones y que sabemos qué transformaciones
aplicar veremos cómo usarlas.
Nuestro objetivo es que, en el listado de trabajos, al pasar por encima de la imagen
destacada, ésta gire y escale de forma progresiva para resaltar el efecto de :hover y que
se puede pinchar en ella para obtener más información del trabajo.
Nuestro código HTML de ejemplo:
<div class="thumbnail">
<img src="" class="thumbnail-img"/>
</div>
Nuestro CSS:
.thumbnail-img {
transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
-ms-transition: all 1s ease-in-out 0s;
}
.thumbnail-img:hover {
transform:rotate(-10deg) scale(1.2);
-webkit-transform:rotate(-10deg) scale(1.2);
-moz-transform:rotate(-10deg) scale(1.2);
-o-transform:rotate(-10deg) scale(1.2);
-ms-transform:rotate(-10deg) scale(1.2);
}
