Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: alefaletti en 29 de Abril 2017, 18:59
-
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.*/
-
Hola alefaletti. La propiedad perspectiva define cuántos píxeles se coloca un elemento 3D de la vista. Esta propiedad le permite cambiar la perspectiva sobre cómo los elementos 3D son vistas.
Aquí tienes mas información:https://www.w3schools.com/cssref/css3_pr_perspective.asp (https://www.w3schools.com/cssref/css3_pr_perspective.asp)
Un saludo. ;D