Autor Tema: CSS y HTML animaciones efecto movimiento transition: all 2s ease-in-out CU01063D (Leído 2412 veces)

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"

Código: [Seleccionar]

#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.

Ogramar · « **Respuesta #1 en:** 04 de Febrero 2016, 19:46 »

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

Dimitar Stefanov · « **Respuesta #2 en:** 04 de Febrero 2016, 22:28 »

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.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: