Transiciones y transformaciones CSS

Como hemos visto en los tutoriales recientes sobre CSS, se pueden crear muchos efectos visuales agradables en sus páginas web completamente en CSS sin necesidad de gráficos o JavaScript. En este tutorial veremos las capacidades de animación integradas en CSS3 para crear efectos que solo eran posibles con tecnologías como Flash en el pasado. Podemos comenzar mirando las transiciones CSS que facilitan la realización de cambios en un estilo sin problemas con el tiempo. A continuación, echaremos un vistazo a Transformaciones. Las transformaciones CSS pueden hacer cosas como sesgar, rotar, escalar y colocar elementos. Al combinar Transiciones y Transformaciones, son posibles algunos efectos de animación interesantes.

Transiciones en CSS3

El efecto que proporcionan las transiciones es muy parecido al que se ve con jQuery. Por ejemplo, si pasa el mouse sobre un enlace en particular en una página web y el color de fondo cambia gradualmente de azul a verde mientras actúa muy hábilmente con varios tonos que aparecen durante el cambio, eso se puede hacer con una transición CSS. Las transiciones hacen cambios que de otra manera serían muy repentinos y abruptos para ser suaves y hábiles. Cuando se usan con moderación, las transiciones pueden agregar un toque agradable a las páginas web.

Propiedad de transición y duración de la transición

Veamos un ejemplo de cómo poner en uso las propiedades transition-propertyy transition-duration. La propiedad de transición toma el nombre de la propiedad CSS a la que desea realizar la transición o agregar un efecto. En el siguiente ejemplo, estamos agregando una transición a la propiedad background-color .

La propiedad de duración de la transición define cuánto tiempo tardará en completarse la transición. En el siguiente ejemplo, lo configuramos en 1 segundo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a.transition1 {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 1em;
    margin: auto;
    width: 20em;
    border-radius: 2em;
    background-color: blue;
    color: #fff;
    transition-property: background-color;
    transition-duration: 1s;
}
 
a.transition1:hover, a.transition1:focus {
    background-color: green;
}

Desplácese sobre el elemento Super para ver la transición del color de fondo en acción.

¡Súper!

Funciones de temporización de transición

Una vez que haya aplicado las propiedades transition-propertyy transition-durationpara usar en un elemento, puede personalizar aún más el comportamiento de la transición utilizando la propiedad de función de tiempo de transición . Esta propiedad se utiliza para definir cómo se calculan los valores intermedios de las propiedades CSS que se están transfiriendo. Los valores que acepta la propiedad de función de tiempo de transición son los siguientes.

facilidad Aplica un efecto de transición que comienza lentamente, se acelera y luego termina lentamente. Es el valor predeterminado.
easy-out Aplica un efecto de transición que tiene un final lento.
easy-in-out Aplica un efecto de transición que tiene un inicio y un final lentos.
lineal Tiene un efecto constante de principio a fin. Se siente un poco robótico.
easy-in Comienza lentamente al principio, luego acelera.
pasos Este valor interesante divide la transición en un número determinado de pasos.
step-start Cambia el estado en un gran paso, justo al comienzo del temporizador de duración.
step-end Cambia el estado en un paso, justo al final del temporizador de duración.

Podemos ver estos diferentes valores en acción aquí. Tenemos ocho cajas diferentes y cada una obtiene un valor diferente para la propiedad de función de tiempo de transición .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
p.timing-functions {
    text-align: center;
    line-height: 30px;
    background-color: #fff;
    border: 4px solid lightblue;
    margin: 1em auto 1em auto;
    width: 120px;
    padding: 10px 10px;
    font-weight: normal;
    transition-property: width;
    transition-duration: 3s;
    transition-timing-function: ease;
}
 
#transition-timing-functions:hover .timing-functions {
    width: 570px;
}

Desplácese sobre el contenedor para ver la transición de ancho con diferentes valores de función de tiempo de transición en acción.

paso a paso

facilitar

Facilitarse

facilidad de entrada

lineal

facilidad en

pasos (3, fin)

escalón

Agregar más propiedades de transición

Puede agregar más de una propiedad CSS como valor a la propiedad de transición , lo que le permite crear animaciones más sofisticadas. Por ejemplo, vamos a tomar nuestro enlace inicial que pasó de azul a verde, y podemos agregar la border-radiuspropiedad a nuestra transición. En el fragmento a continuación, puede ver que ahora tenemos una segunda propiedad CSS agregada a la propiedad de transición . Tenga en cuenta que la duración de la transición ahora también tiene un segundo valor de tiempo. Esto significa que puede cambiar el tiempo que tarda cada transición de forma independiente. Para nuestros propósitos, la transición del color de fondo ocurre en un segundo y la transición del radio del borde ocurre en tres segundos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
a.transition2 {
    margin: auto;
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 1em;
    width: 20em;
    border-radius: 2em;
    background-color: blue;
    color: #fff;
    transition-property: background-color, border-radius;
    transition-duration: 1s, 3s;
}
 
a.transition2:hover, a.transition2:focus {
    background-color: green;
    border-radius: 0;
}

Pase el ratón sobre el elemento de Super para ver la transición de fondo color y la transición de la frontera de radio en acción.

¡Súper!

¡Eso es bastante estupendo! Ahora llevemos esa idea un poco más lejos. Podemos usar la transición de un radio de borde para convertir un cuadrado en un círculo. Además, también aplicaremos una transición al espaciado entre letras y al color de la fuente. Podemos crear un cuadrado perfecto con un centro horizontal y vertical usando Flexbox, luego agregamos nuestras transiciones.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
p.square-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    background-color: #fff;
    border: 10px solid lightblue;
    margin: 1em auto 1em auto;
    width: 300px;
    padding: 15px 15px;
    font-weight: bold;
    transition-property: border-radius, letter-spacing, color;
    transition-duration: 1s;
}
 
.square-circle:hover {
    border-radius: 50%;
    letter-spacing: 10px;
    color: blue;
}

Coloca el cursor sobre el cuadrado para convertirlo en un círculo.

Circleify

Quizás prefieras ver un círculo transformarse en un cuadrado. Para hacer eso, simplemente configure el radio de borde para comenzar en 50% y luego haga la transición a radio sin borde.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
p.circle-square {
    display: flex;
    height: 300px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 10px solid lightblue;
    margin: 1em auto 1em auto;
    width: 300px;
    padding: 15px 15px;
    font-weight: bold;
    border-radius: 50%;
    transition-property: border-radius, letter-spacing, color;
    transition-duration: 1s;
}
 
.circle-square:hover {
    border-radius: 0;
    letter-spacing: 10px;
    color: blue;
}

Coloca el cursor sobre el círculo para convertirlo en un cuadrado.

Squareify

Este divertido efecto puede agregar un borde interior a un elemento a través de una caja de sombra.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
p.inner-border {
    display: flex;
    height: 200px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 30px solid lightblue;
    margin: 1em auto 1em auto;
    width: 100%;
    padding: 15px 15px;
    font-weight: bold;
    transition-property: box-shadow, color;
    transition-duration: 1s;
}
 
.inner-border:hover {
    box-shadow: inset 0 0 0 30px lightskyblue;
}

Coloca el cursor sobre el rectángulo para agregar un borde interior.

Efecto de borde interior a través de Box Shadow

Puede seguir acumulando estas propiedades de transición si lo desea. En este, agregaremos una transición a la sombra del cuadro, el color de fondo, el color y el espaciado entre letras del elemento. Tiene un efecto estupendo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
p.four-transitions {
    display: flex;
    height: 200px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 30px solid lightblue;
    margin: 1em auto 1em auto;
    width: 100%;
    padding: 15px 15px;
    font-weight: bold;
    transition-property: box-shadow, background-color, color, letter-spacing;
    transition-duration: 1s;
}
 
.four-transitions:hover {
    box-shadow: inset 0 0 0 30px lightskyblue;
    background-color: lightcyan;
    color: darkblue;
    letter-spacing: 30px;
}

Desplácese sobre el elemento para ver cuatro propiedades en transición.

¡Cuatro transiciones de propiedad!

Creación de un efecto de pulsación de botón

Podemos usar todas las técnicas que hemos aprendido hasta ahora para crear algunos efectos geniales de botones en un menú de caja flexible.

html

1
2
3
4
5
6
7
8
9
<ul id="flex-menu">
    <li><a class="flex-item" href="">HTML</a></li>
    <li><a class="flex-item" href="">JavaScript</a></li>
    <li><a class="flex-item" href="">CSS</a></li>
    <li><a class="flex-item" href="">PHP</a></li>
    <li><a class="flex-item" href="">Linux</a></li>
    <li><a class="flex-item" href="">Windows</a></li>
    <li><a class="flex-item" href="">Cloud</a></li>
</ul>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
ul#flex-menu {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
 
a.flex-item {
    display: block;
    margin: 5px;
    padding: .6em 2em;
    text-decoration: none;
    text-align: center;
    color: darkslategrey;
    letter-spacing: .2em;
    font-weight: bold;
    background-color: lightyellow;
    border: 5px solid lightgrey;
    border-radius: 6px;
    box-shadow: 0 4px 2px rgba(0, 0, 0, .5);
    position: relative;
    top: 0px;
    transition: all .3s;
}
 
a.flex-item:hover, a.flex-item:focus {
    background-color: #ffe686;
    border-color: #ffd13f;
}
 
a.flex-item:active {
    top: 3px;
    box-shadow: 0 1px 2px darkgray;
}

Desplácese sobre un elemento del menú, luego haga clic y mantenga presionado para obtener el efecto de "presionar un botón". La acción de hacer clic y mantener presionado da la impresión de que un botón se presiona hacia abajo cuando se presiona.

Transformaciones CSS

La primera sección discutió las transiciones CSS y el hecho de que son la forma más sencilla de agregar un efecto de suavizado en los elementos a medida que cambian entre dos estados. Ahora podemos echar un vistazo a las transformaciones CSS, que son el siguiente nivel de potencia en las tecnologías de animaciones CSS. CSS Transforms puede transformar los elementos de su página web en todo tipo de formas divertidas e interesantes. Podemos hacer cosas como estirar un elemento, cambiar las coordenadas de un elemento, rotar elementos y más.

¡La transformpropiedad CSS es fantástica! Puede aceptar una gran cantidad de valores para modificar el espacio de coordenadas del modelo de formato visual CSS. Aquí está la lista de valores que puede usar con la propiedad transform .

rotate () Gira un elemento de página alrededor de un punto fijo en el plano 2D.
rotateX () Gira un elemento de página alrededor de la abscisa (eje horizontal).
rotateY () Gira un elemento de página alrededor de la ordenada (eje vertical).
rotateZ () Gira un elemento de página alrededor del eje z.
rotate3d () Gira un elemento de página alrededor de un eje fijo en el espacio 3D.
translate () Cambia la posición de los elementos en las direcciones horizontal y / o vertical.
translateX () Cambia la posición de un elemento horizontalmente en el plano 2D.
translateY () Cambia la posición de un elemento verticalmente en el plano 2D.
scale () Cambia el tamaño del elemento.
scaleX () Cambia el tamaño del elemento horizontalmente.
scaleY () Cambia el tamaño del elemento verticalmente.
skew () Da un efecto de inclinación al elemento.
skewX () Inclina el elemento horizontalmente.
skewY () Inclina el elemento verticalmente.

Ahora que sabemos lo que se puede hacer con todos los diferentes valores de transform, veamos un montón de ejemplos. Podemos empezar con una simple nube.

1
2
3
<div class="cloudwrapper">
    <img class="cloud" src="cloud.png">
</div>

1
2
3
4
5
6
.cloudwrapper {
    text-align: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

solo una bonita nube

translateX ()

La función de CSS translateX () cambia la posición de un elemento horizontalmente en el plano 2D. Eso significa que podemos mover nuestra nube hacia la derecha un poco así.

1
2
3
.cloud {
    transform: translateX(150px);
}

ejemplo de transform translateX

scaleX ()

La función CSS scaleX () cambia el tamaño de un elemento a lo largo del eje x, que es horizontal. Eso significa que podemos hacer que nuestra nube sea dos veces más grande aquí horizontalmente.

1
2
3
.cloud {
    transform: scaleX(2);
}

css transformar scaleX

escala()

La función scale () puede aceptar más de un valor. El segundo valor en este ejemplo también se escala en el eje y. Entonces, esta nube se escalará horizontal y verticalmente.

1
2
3
.cloud {
    transform: scale(2, 2);
}

traducir los valores xey de la escala

girar()

Podemos rotar elementos en la página con la función CSS rotate () . Esta función gira un elemento alrededor de un punto fijo en el plano 2D. Veamos algunos ejemplos.

Se utilizan dos imágenes para dar un buen efecto con la función rotate () . La primera imagen tiene una opacidad menor para mostrar la posición original frente a la posición transformada .

1
2
3
4
<div class="container">
    <img src="waterfall.jpg" class="one">
    <img src="waterfall.jpg" class="two">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
    position: relative;
    width: 700px;
    height: 400px;
    padding: 0px 15px 100px 15px;
}
 
.one, .two {
    position: absolute;
    top: 0;
    left: 0;
    margin: 40px;
}
 
.one {
    opacity: .3;
}
 
.two {
    transform: rotate(-15deg);
}

css transform rotate 2 efecto de imagen

origen de transformación

Cuando usamos la función rotate () con la propiedad transform , también podemos usar transform-originpara cambiar la posición de los elementos transformados. En otras palabras, podemos especificar la ubicación del pivote en la que gira el elemento. El valor de transform-originpuede ser medidas de longitud, palabras clave o valores porcentuales. El primer valor dado es el desplazamiento horizontal mientras que el segundo es el desplazamiento vertical. Si especifica solo un valor, este valor se usa para ambos.

1
2
3
4
<div class="container">
    <img src="apple.jpg" class="one">
    <img src="apple.jpg" class="three">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.one, .three {
    position: absolute;
    top: 0;
    left: 0;
    margin: 100px;
}
 
.one {
    opacity: .3;
}
 
.three {
    transform: rotate(20deg);
    transform-origin: top center;
}

Observe cómo con transform-origin: top center; conjunto, la imagen utiliza esa ubicación para rotar.
ejemplo de centro superior de origen de transformación

Aquí podemos establecer transform-origin: right bottom; para ver cómo eso cambia el efecto.

1
2
3
4
<div class="container">
    <img src="autumn.jpg" class="one">
    <img src="autumn.jpg" class="four">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 150px;
}
 
.one, .four {
    position: absolute;
    top: 0;
    left: 0;
    margin: 100px;
}
 
.one {
    opacity: .3;
}
 
.four {
    transform: rotate(20deg);
    transform-origin: right bottom;
}

Ahora obtenemos lo que esperaríamos. La imagen gira fuera del área inferior derecha . ¡Frio!
ejemplo de la parte inferior derecha de origen de transformación

Además de describir el origen de la transformación , puede especificar con coordenadas exactas.

1
2
3
4
<div class="container">
    <img src="bench.jpg" class="one">
    <img src="bench.jpg" class="five">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 150px;
}
 
.one, .five {
    position: absolute;
    top: 0;
    left: 0;
    margin: 100px;
}
 
.one {
    opacity: .2;
}
 
.five {
    transform: rotate(20deg);
    transform-origin: 400px 0;
}

traducir()

La función de CSS translate () cambia la posición de un elemento en la dirección horizontal, y la dirección vertical si lo desea. Si solo necesita cambiar la posición horizontal o verticalmente, puede usar translateX () o translateY () .

1
2
3
4
<div class="container">
    <img src="butterfly.jpg" class="one">
    <img src="butterfly.jpg" class="two">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 100px;
}
 
.one, .two {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}
 
.one {
    opacity: .3;
}
 
.two {
    transform: translate(90px, 60px);
}

¡Qué hermosa mariposa!
css transform traducir dos valores

La función translate () también puede aceptar valores negativos para efectos interesantes.

1
2
3
4
<div class="container">
    <img src="boards.jpg" class="one">
    <img src="boards.jpg" class="four">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 100px;
}
 
.one {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}
 
.one {
    opacity: .3;
}
 
.four {
    transform: translate(-5%, -25%);
}

css transform traducir valores negativos

Aquí usamos nuevamente la función scale () para hacer una imagen nítida en un efecto de imagen.

1
2
3
4
<div class="container">
    <img src="abstractcolors.jpg" class="one">
    <img src="abstractcolors.jpg" class="three">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 50px 100px;
}
 
.one, .three {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}
 
.one {
    opacity: .3;
}
 
.three {
    transform: scale(.75);
}

escala de transformación css 75

Este uso de scale () crea un bonito efecto de llamada usando una imagen.

1
2
3
4
<div class="container">
    <img src="brushstrokes.jpg" class="one">
    <img src="brushstrokes.jpg" class="four">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 50px 100px;
}
 
.one, .four {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}
 
.one {
    opacity: .3;
}
 
.four {
    transform: scale(1.5, .5);
}

transformar escala impresionante

Sesgos

Los distintos valores de sesgo de skew () , skewX () y skewY () se utilizan para cambiar el ángulo en ambos o en cualquiera de los ejes en un cierto número de grados. Esto crea esos efectos de estilo inclinado.

Este primer ejemplo de skewX () le da un efecto de inclinación a la imagen.

1
2
3
4
<div class="container">
    <img src="splatter2.jpg" class="one">
    <img src="splatter2.jpg" class="three">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 120px;
}
 
.one, .two {
    position: absolute;
    top: 0;
    left: 0;
    margin: 150px;
}
 
.one, .two {
    margin-top: 50px;
    margin-bottom: 50px;
}
 
.one {
    opacity: .3;
}
 
.two {
    transform: skewX(30deg);
}

css transform skewx 30 grados

Este uso de skewY () crea lo que casi parece un efecto de libro de apertura.

1
2
3
4
<div class="container">
    <img src="splatter2.jpg" class="one">
    <img src="splatter2.jpg" class="three">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 120px;
}
 
.one, .three {
    position: absolute;
    top: 0;
    left: 0;
    margin: 150px;
}
 
.one {
    margin-top: 50px;
    margin-bottom: 50px;
    opacity: .3;
}
 
.three {
    transform: skewY(20deg);
}

transformación CSS sesgada 20 grados

En el siguiente ejemplo, sesgar () toma dos valores para sesgar en dos planos.

1
2
3
4
<div class="container">
    <img src="splatter3.jpg" class="one">
    <img src="splatter3.jpg" class="four">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 120px;
}
 
.one, .four {
    position: absolute;
    top: 0;
    left: 0;
    margin: 150px;
}
 
.one {
    margin-top: 50px;
    margin-bottom: 50px;
    opacity: .3;
}
 
.four {
    transform: skew(15deg, 20deg);
}

css transformar sesgo 15 y 20

Las tres imágenes siguientes utilizan una combinación de escala () y rotación () juntas, lo que crea un efecto realmente agradable.

1
2
3
4
5
6
7
<div id="threepics" style="height: 200px;">
    <ul>
        <li><img src="sun.jpg" id="one"></li>
        <li><img src="water.jpg" id="two"></li>
        <li><img src="houses.jpg" id="three"></li>
    </ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#threepics ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
 
#threepics li {
    float: left;
    margin-right: 10px;
}
 
#threepics li:last-of-type {
    margin-right: 0;
}
 
#threepics img {
    width: 200px;
    height: 150px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
    transition: transform .3s ease-in-out;
}
 
#threepics li:hover img {
    box-shadow: 6px 6px 6px rgba(0, 0, 0, .3);
}
 
#threepics li:hover #one, li:hover #one {
    transform: scale(2) rotate(-3deg);
}
 
#threepics li:hover #two, li:focus #two {
    transform: scale(2) rotate(5deg);
}
 
#threepics li:hover #three, li:focus #three {
    transform: scale(2) rotate(-7deg);
}

Coloca el cursor sobre cada imagen para obtener un efecto agradable.

Transformaciones 3D

También hay formas de convertir sus transformaciones en efectos que dan una sensación de tres dimensiones. Para hacer esto, uno debe hacer uso de la propiedad de perspectiva . La propiedad de perspectiva se puede asignar a un elemento contenedor que indica al navegador que trate los elementos secundarios como si estuvieran en un espacio tridimensional. El valor dado a esta propiedad es un número entero que especifica la distancia desde el origen del elemento en el eje z. Recuerde que los ejes X e Y son horizontales, y el eje Z es hacia y desde. Imagina la distancia entre las letras de una página web y tus ojos.

Este primer ejemplo utiliza estas técnicas para crear algunas imágenes volteando como cartas.

1
2
3
4
5
<ul>
    <li><img src="design1.jpg"></li>
    <li><img src="design2.jpg"></li>
    <li><img src="design3.jpg"></li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ul {
    width: 1000px;
    height: 150px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    perspective: 500;
}
 
li {
    float: left;
    margin-right: 10px;
    transform: rotateY(50deg);
}
 
li img {
    width: 200px;
    height: 150px;
}

Ejemplo de transformación 3d

Un segundo ejemplo es hacer uso de transformaciones 3-D para crear algunas imágenes en una perspectiva similar a Star Wars. ¡Bastante interesante!

1
2
3
4
5
<ul>
    <li><img src="design4.jpg"></li>
    <li><img src="design5.jpg"></li>
    <li><img src="design6.jpg"></li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ul {
    width: 630px;
    height: 100px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    perspective: 500;
}
 
li {
    float: left;
    margin-right: 10px;
    transform: rotateX(50deg);
}
 
li img {
    width: 200px;
    height: 150px;
}

Resumen de transiciones y transformaciones CSS

Las transiciones y transformaciones CSS son una excelente manera de pulir las experiencias de los usuarios. Están completamente integrados en el lenguaje CSS, por lo tanto, los efectos agradables que puede lograr no requieren JavaScript. Las transiciones especifican la duración de un elemento que cambia su estado suavemente con el tiempo y sin ellas, un cambio de estado visual es abrupto e inmediato. Para aplicar transiciones, puede usar las propiedades de transición-propiedad (requerido), transición-duración (requerido), transición-función-temporización y transición-retardo . Las transformaciones permiten a los diseñadores mover o cambiar la apariencia de un elemento en un plano 2D. Por lo general, se activan con un cambio de estado de desplazamiento. Los cuatro tipos de transformaciones son Rotar ,Inclinar , escalar y trasladar . Tiene sentido usar transiciones cuando se usan transformaciones para producir un efecto suave y gradual.

Header Ads Widget