Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: paramonso en 21 de Junio 2017, 14:04
-
Hola. Hago la entrega del ejercicio CU01063D del curso práctico de programación web con CSS desde cero.
#transejEj1= Se aplica a todos los elementos div dentro del contenedor*/
transition:all 2s ease-in-out;)
all=La transición es para todas la propiedades del elemento div
2s= la duración de la transición sera de 2 segundos
ease-in-out= Comienza lento y la progresión es a velocidad constante
perspective: 800px; =distancia de la imagen
perspective-origin: 55% 100px; = Cambia el angulo de la perspectiva
#transEj1:hover #rotateX=*Cuando el raton este dencima del contenedor
{
transform:rotateX(180deg);/* child rotateX girara la figura 180º
de abajo hacia arriba */
}
#transEj1:hover #rotateY { /*Cuando el raton este dencima del contenedor */
transform:rotateY(180deg);/* child rotateY girara la figura 180º */
} /*de izquierda a derecha*/
#transEj1:hover #rotateZ { /*Cuando el raton este dencima del contenedor */
transform:rotateZ(180deg);/* child rotateZ girara la figura 180º
de abajo hacia arriba y de
izquierda a derecha*/
}
-
Buenas.
Faltaría el código que pide en el apartado a.
El apartado b está bien respondido, pero para que quede más claro te recomiendo leer el siguiente enlace:
https://www.aprenderaprogramar.com/foros/index.php?topic=4372.msg18118#msg18118
Saludos. ;D
-
Hola
Este es el código del ejercicio.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{margin:0; padding:0; font-family: sans-serif;}
div{ border: 5px solid; width: 260px;
margin:60px 0 0 90px; background-color:yellow;
font-size: 20px; text-align:center;
padding-top: 10px; word-wrap:break-word;
float:left;
}
#transEj1 div {
/*#transejEj1= Se aplica a todos los elementos div dentro del contenedor*/
transition:all 2s ease-in-out;);
/*all=La transición es para todas la propiedades del elemento div */
/*2s =la duración de la transición sera de 2 segundos */
/*ease-in-out= Comienza lento y progresión a velocidad constante */
perspective: 800px; /*distancia de la imagen */
perspective-origin: 55% 100px; /*Cambia el angulo de la perspectiva*/
}
#transEj1:hover #rotateX /*Cuando el ratón este encima del contenedor */
{ transform:rotateX(180deg);
/* child rotateX girara la figura 180º
de abajo hacia arriba */
}
#transEj1:hover #rotateY { /*Cuando el ratón este encima del contenedor */
transform:rotateY(180deg);/* child rotateY girara la figura 180º */
/* de izquierda a derecha*/
}
#transEj1:hover #rotateZ { /*Cuando el ratón este encima del contenedor */
transform:rotateZ(180deg);/* child rotateZ girara la figura 180º
de abajo hacia arriba y de izquierda
a derecha*/
}
h2{margin: 15px 0 0 140px;}
img {padding:10px; }
</style>
</head>
<body>
<h2>CSS transition</h2>
<div id="transEj1" style="border-style:none; border-width:0; background-color:white;">
<div id="rotateX" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" ></a></div>
<div id="rotateY" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" ></a></div>
<div id="rotateZ" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" ></a></div>
</div>
</body>
</html>