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: Dimitar Stefanov en 22 de Enero 2016, 01:29
-
Códigos del ejercicio CU01063D del curso CSS desde cero.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos100.css"/>
<title>Portal web</title>
</head>
<body>
<div id="transEj1" style="border: solid 2px; background-color: yellow; width:200px">
<div>
<div id="rotateX"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++"/></div>
<div id="rotateY"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++"/></div>
<div id="rotateZ"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++"/></div>
</div>
</div>
</body>
</html>
Código CSS: "estilos100.css"
#transEj1 div {
transition: all 2s ease-in-out;
perspective: 100px;
perspective-origin: 50% 100px;
}
#transEj1:hover #rotateX {
transform: rotateX(180deg);
}
#transEj1:hover #rotateY {
transform: rotateY(180deg);
}
#transEj1:hover #rotateZ {
transform: rotateZ(180deg);
}
No entiendo muy bien la propiedad perspective y perspective-origin. Las demás son:
1) #transEj1:hover #rotateX {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 que el elemento #rotateX rote 180grados horizontalmente.
2)#transEj1:hover #rotateY {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 que el elemento #rotateY rote 180grados vertitcalmente.
3)#transEj1:hover #rotateZ {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 que el elemento #rotateZ rote 180grados en profundida.
Gracias.
-
Buenas dimiste veo el ejercicio bien resuelto. Sobre perspective y perspective-origin el ejercicio precisamente lo que pedía era eso, buscar información sobre el significado de estas propiedades y explicarlas. Ten en cuenta que si trabajas en programación muchas veces te encontrarás fragmentos de código que desconozcas y tendrás que interpretar por eso es importante también saber buscar información.
Salu2
-
Buenas, Ogramar.
Gracias por contestarme a mis dudas. La verdad que tengo muchas, pero me doy cuenta de lo que me comentas. Muy a menudo me encuentro con comandos que desconozco, intento buscar información sobre ellas, a veces lo consigo, a veces no, jeje.
Menos mal que estáis aquí para corregirme y ayudarme. De verdad, el único camino para aprender es equivocarnos muchas veces. Soy consciente de ello.
Agradezco mucho el trabajo que hacéis.
Saludos.