« anterior próximo »
Páginas: [1]

Autor Tema: CSS cambiar ángulo Animaciones Transition-property transition-duration CU01063D  (Leído 2046 veces)

paramonso

  • Intermedio
  • ***
  • Mensajes: 241
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
CSS cambiar ángulo Animaciones Transition-property transition-duration CU01063D
« en: 21 de Junio 2017, 14:04 »
Hola. Hago la entrega del ejercicio CU01063D del curso práctico de programación web con CSS desde cero.

Código: [Seleccionar]
#transejEj1= Se aplica a todos los elementos div dentro del contenedor*/
transition:all 2s   ease-in-out;)
all=La transición es para todas la propiedades del elemento div
2s= la duración de la transición sera de 2 segundos
ease-in-out= Comienza lento y la progresión es a velocidad constante
perspective: 800px;   =distancia de la imagen 
perspective-origin: 55% 100px;  = Cambia el angulo de la perspectiva


#transEj1:hover #rotateX=*Cuando el raton este dencima del contenedor
{
  transform:rotateX(180deg);/* child rotateX girara la figura 180º
de abajo hacia arriba */
}
#transEj1:hover #rotateY { /*Cuando el raton este dencima del contenedor */
   transform:rotateY(180deg);/* child rotateY girara la figura 180º */
}      /*de izquierda a derecha*/
#transEj1:hover #rotateZ { /*Cuando el raton este dencima del contenedor */
   transform:rotateZ(180deg);/* child rotateZ girara la figura 180º
       de abajo hacia arriba y de
                                                                                                  izquierda a derecha*/
  }
« Última modificación: 22 de Julio 2017, 13:59 por Ogramar »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS desde cero Ejercicio 63 CU01063D
« Respuesta #1 en: 25 de Junio 2017, 00:56 »
Buenas.

Faltaría el código que pide en el apartado a.

El apartado b está bien respondido, pero para que quede más claro te recomiendo leer el siguiente enlace:

https://www.aprenderaprogramar.com/foros/index.php?topic=4372.msg18118#msg18118

Saludos. ;D
En línea

paramonso

  • Intermedio
  • ***
  • Mensajes: 241
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
Re:CSS Animaciones, Transition-property, transition-duration CU01063D
« Respuesta #2 en: 25 de Junio 2017, 10:35 »
Hola
Este es el código del ejercicio.

Código: [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{margin:0; padding:0; font-family: sans-serif;}
div{ border: 5px solid; width: 260px;
margin:60px 0 0 90px; background-color:yellow;
font-size: 20px; text-align:center;
padding-top: 10px; word-wrap:break-word;
float:left;
}
 
#transEj1 div {
/*#transejEj1= Se aplica a todos los elementos div dentro del contenedor*/
transition:all 2s   ease-in-out;);
                                               /*all=La transición es para todas la propiedades del elemento div */
                                               /*2s =la duración de la transición sera de 2 segundos */
                                              /*ease-in-out= Comienza lento y progresión a velocidad constante */

perspective: 800px;    /*distancia de la imagen  */
perspective-origin: 55% 100px;  /*Cambia el angulo de la perspectiva*/
}

#transEj1:hover #rotateX /*Cuando el ratón este encima del contenedor */
{  transform:rotateX(180deg);
/* child rotateX girara la figura 180º
     de abajo hacia arriba */
                                }

#transEj1:hover #rotateY { /*Cuando el ratón este encima del contenedor */
         transform:rotateY(180deg);/* child rotateY girara la figura 180º */
   /* de izquierda a derecha*/
                                           }     

#transEj1:hover #rotateZ { /*Cuando el ratón este encima del contenedor */
transform:rotateZ(180deg);/* child rotateZ girara la figura 180º
    de abajo hacia arriba y de izquierda
                                                                                   a derecha*/
  }
 

h2{margin: 15px 0 0 140px;}
img {padding:10px; }

</style>
</head>
<body>
<h2>CSS transition</h2>
<div id="transEj1" style="border-style:none; border-width:0; background-color:white;">
<div id="rotateX" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" ></a></div>
<div id="rotateY" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" ></a></div>
<div id="rotateZ" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" ></a></div>
</div>
</body>
</html>
En línea
Páginas: [1]
« anterior próximo »
 

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