Hola a todos!. Para el ejercicio CU01063D del tutorial básico de programación web CSS desde cero. Esta es mi solución:
a) Código html
<head>
<meta charset="utf-8">
<title>Ejercicio 1063</title>
<style type="text/css">
*{margin:0; padding:0; font-family: sans-serif;}
.bloquePub{border:5px solid; width:260px;
float:left;
margin:60px 0 0 90px; background-color:yellow;
font-size:20px; text-align:center;
padding-top:20px;word-wrap:break-word;
border-radius:40px;}
h2{width:25%; text-align:center; margin:15px auto;}
img{padding:10px;}
#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);}
</style>
</head>
<body>
<div id="transEj1" style="border-style:none; border-width:0;">
<h2>CSS transition</h2>
<div class="bloquePub" id="rotateX">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" ></div>
<div class="bloquePub" id="rotateY">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" ></div>
<div class="bloquePub" id="rotateZ">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" ></div>
</div>
</body>
</html>
b)Siguiendo con lo expuesto en el enunciado
#transEj1 div indica los estilos que se aplicarán a div dentro de
elementos con id=”transEj1”.
transition: all indica que … se aplicará la transición a todas las
propiedades con posibilidad de hacerlo.
2s ease-in-out; establece en 2 segundos la duración de la transición y hace que esta tenga un comienzo lento y progresión a velocidad constante.
perspective:800px; perspective-origin:50% 100px; esta función maneja el grado de perspectiva con respecto a z (profundidad) y establece el origen
de esta.
"Aunque no conseguí ver los resultados. Ni con Chrome (-webkit), ni con
Firefox (-mod), ni con Explore, -algo estoy haciendo mal, ya que en los
giros, "#rotateX" y "#rotateY", se tendría que apreciar la perspectiva-.
#transEj1:hover #rotateX{transform:rotateX(180deg);} hace que cuando se pasa el cursor sobre el elemento con el id="transEj1", o cualquiera de los
elementos en él, el div con id="rotateX" rote sobre el eje X 180 grados.
#transEj1:hover #rotateY{transform:rotateY(180deg);} hace que cuando se pasa el cursor sobre el elemento con el id="transEj1", o cualquiera de los
elementos en él, el div con id="rotateY" rote sobre el eje Y 180 grados.
#transEj1:hover #rotateZ{transform:rotateZ(180deg);} hace que cuando se pasa el cursor sobre el elemento con el id="transEj1", o cualquiera de los
elementos en él, el div con id="rotateZ" rote sobre el eje Z 180 grados.
Un saludo!
Y Gracias!!
Tema: HTML y CSS animaciones css transition-property duration delay timing CU01063D (Leído 2214 veces)
RSS -
WAP2