Autor Tema: CSS Animaciones para qué sirve la propiedad perspective y origin CU01063D  (Leído 1604 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
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 :

Código: [Seleccionar]
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

Código: [Seleccionar]

<!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:

Código: [Seleccionar]

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

« Última modificación: 18 de Junio 2017, 12:30 por Alex Rodríguez »

Jack_F

  • Visitante
Re:Ejercicio final - CSS Animaciones (CU01063D) y Pregunta
« Respuesta #1 en: 02 de Mayo 2017, 21:13 »
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

Un saludo. ;D

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".