Animaciones CSS. transition-property, transition-duration, timing-function y efecto delay. Ejemplos. (CU01063D)
Aquí les dejo el código en CSS dado por el curso bases de la programación web para principiantes:
#transEj1 div { transition:all 2s ease-in-out; perspective: 800px; perspective-origin: 50% 100px; }
#transEj1:hover #rotateX { transform:rotateX(180deg);}
#transEj1:hover #rotateY { transform:rotateY(180deg);}
#transEj1:hover #rotateZ { transform:rotateZ(180deg);}
Y ahora les dejo mi código en HTML en base a lo que muestra el código CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transiciones</title>
<link rel="stylesheet" type="text/css" href="transition.css">
</head>
<body>
<div id="transEj1" style="width: 600px; height: 200px; margin: 30px auto;">
<div id="rotateX" style="float: left; width: 30%; height: 200px; background: radial-gradient(#CCC, #555); margin-left: 3%"></div>
<div id="rotateY" style="float: left; width: 30%; height: 200px; background: radial-gradient(#CCC, #555); margin-left: 3%"></div>
<div id="rotateZ" style="float: left; width: 30%; height: 200px; background: radial-gradient(#CCC, #555); margin-left: 3%"></div>
</div>
</body>
</html>
#transEj1 div { transition:all 2s ease-in-out; perspective: 800px; perspective-origin: 50% 100px; }; Todos los elementos div que se encuentren dentro de un contenedor con id="transEj1" tendrán una transición para todos los atributos, durará dos segundos y su velocidad empezará lento pero después se normalizara hasta el final de la transición; el contenido 3d de "transEj1" se verá en una perspectiva de 800px; esa perspectiva se basa en 50% en la vertical y 100px en la horizontal.
#transEj1:hover #rotateX { transform:rotateX(180deg);}; Las siguientes propiedades afectan al elemento id="rotateX" cuando el mouse se coloca encima del elemento padre con id="transEj1". Rotara unos 180 grados usando como base el eje X (gira hacia adelante).
#transEj1:hover #rotateY { transform:rotateY(180deg);}; Las siguientes propiedades afectan al elemento id="rotateY" cuando el mouse se coloca encima del elemento padre con id="transEj1". Este rotara unos 180 grados también, solo que este usara de base el eje Y (gira a la derecha).
#transEj1:hover #rotateZ { transform:rotateZ(180deg);}; Las siguientes propiedades afectan al elemento id="rotateZ" cuando el mouse se coloca encima del elemento padre con id="transEj1". Este rotara 180 grados pero usando de base a Z (profundidad). (girara de frente)
Tema: CSS y HTML Animaciones ejemplo Transition-property, transition-duration CU01063D (Leído 2022 veces)
RSS -
WAP2