Estimados; buenas tardes. Planteo mi solución al ejercicio CU01063D del taller práctico de desarrollo web con CSS desde cero.
Mi pregunta es que función cumple :
perspective: 800px;perspective-origin: 50% 100px;
en el ejercicio final, ya que al quitarlo del código no veo ningún cambio.
Muchas gracias.
Aqui mi ejercicio:
HMTL
<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS(63)ejfinal.css">
</head>
<body>
<div id="transEj1">
<div id="rotateX">
<img src="http://elsitiodeale.byethost7.com/imagenchica.jpg">
</div>
<div id="rotateY">
<img src="http://elsitiodeale.byethost7.com/imagenchica.jpg">
</div>
<div id="rotateZ">
<img src="http://elsitiodeale.byethost7.com/imagenchica.jpg">
</div>
</div>
</body>
</html>
y el CSS con sus explicaciones:
#transEj1 div {transition:all 2s ease-in-out;
perspective: 800px;perspective-origin: 50% 100px;}
/* Define las propiedades que afectaran a los div con id="#transEj1"
transition:
all: indica que se verán afectadas por la transición todas las propiedades que se pueda.
2s: Las transiciones se realizan en 2 segundos.
ease-in-out: La velocidad a la que transcurre la transicion (respetando la duracion establecida) sera con comienzo lento y progresion a velocidad constante
*/
#transEj1:hover #rotateX {transform:rotateX(180deg);}
/*Al pasar el mouse por un elemento con id "transEj1", este elemento rotara sobre el eje X 180 grados.*/
#transEj1:hover #rotateY {transform:rotateY(180deg);}
/*Al pasar el mouse por un elemento con id "transEj1", este elemento rotara sobre el eje Y 180 grados.*/
#transEj1:hover #rotateZ {transform:rotateZ(180deg);}
/*Al pasar el mouse por un elemento con id "transEj1", este elemento rotara sobre el eje Z 180 grados.*/
Tema: CSS Animaciones para qué sirve la propiedad perspective y origin CU01063D (Leído 2503 veces)
RSS -
WAP2