Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Pandemia en 11 de Abril 2016, 13:46
-
Buenos días amigos aquí os dejo la resolución de mi ejercicio que creo que ha quedado bastante vistosa, bueno eso creo yo je je, a lo mejor hay algún fallo por ahí, bueno ya me contareis, espero que os guste le he puesto muchas ganas.
Como siempre muchas gracias por vuestro tiempo.
Saludos y ahí van los códigos y respuestas del ejercicio.
a) Crea un documento HTML donde se vean los estilos que tenemos en el código aplicados a distintos elementos.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Animaciones CSS con la propiedad transition (shortand).</title>
<meta name="description" content="portal web -- aprenderaprogramar.com">
<meta name="keywords" content="animaciones css con transition">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos33.css">
</head>
<body>
<div id="transEj1" style="border-style:none;border-width:0;background-color:white;">
<h2>CSS transition</h2>
<div>
<div id="rotateX" style="border-radius: 40px;width: 290px;">Animaciones css con transition<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTv2fBU6gq0t_-bZPelv4jvHRmuVoMolkRCrXH4-zIrR84YxpUOWQ"></a></div>
<div id="rotateY" style="border-radius: 40px;width: 290px;">Animaciones css con transition<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTv2fBU6gq0t_-bZPelv4jvHRmuVoMolkRCrXH4-zIrR84YxpUOWQ"></a></div>
<div id="rotateZ" style="border-radius: 40px;width: 290px;">Animaciones css con transition<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTv2fBU6gq0t_-bZPelv4jvHRmuVoMolkRCrXH4-zIrR84YxpUOWQ"></a></div>
</div>
</div>
</body>
</html>
Y ahora el css...
/*ejercicio CU01063D curso css animaciones css. transition-property, transition-duration, transition-timing-function, y transition-delay*/
*{margin:0;padding:0;font-family:sans-serif;}
div{
border: 6px solid;
width: 300px;
margin: 0 auto;
background-color: yellow;
font-size: 20px;
text-align: center;
padding-top: 20px;
word-wrap: break-word;
}
img{padding: 10px;}
h2{width: 50%;text-align: center;margin: 0px auto;}
#transEj1 div {
transition: all 2s ease-in-out;
perspective: 800px;
perspective-origin: 50% 100px;
}
#transEj1:hover #rotateX{transform:rotateX(180deg);}
#transEj1:hover #rotateY{transform:rotateY(180deg);}
#transEj1:hover #rotateZ{transform:rotateZ(180deg);}
/*b) Explica el significado de cada una de las partes del código (por #transEj1 div indica los estilos que se aplicarán a div dentro de elementos con id=”transEj1”. transition: all indica que …, 2s indica que … , ease-in-out indica que…, etc.)
Despues de buscar mucho por internet lo que he encontrado sobre la propieda perspective, es lo siguiente: Propiedad que permite modificar la distancia de la perspectiva 3d con la que mostrarán todos sus objetos hijos.
Nota: Esta propiedad puede combinarse con la propiedad perspective-origin.
Sintaxis
perspective: valor;
valor Distancia de la perspectiva. Es recomendable especificar el valor en pixeles. (por defecto es none / 0)
Nota: Solo es aplicable para transformaciones 3D.
Compatibilidad
Esta propiedad está soportada por todos los navegadores compatibles con CSS3
Soportado a partir de la versión 12 con el prefijo -webkit-
Soportado a partir de la versión 16
Soportado a partir de la versión 15 con el prefijo -webkit-
Soportado a partir de la versión 5 con el prefijo -webkit-
Soportado a partir de la versión 10
a) #transEj1:hover #rotateX {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 hace que el elemento #rotateX rote 180grados horizontalmente.
b)#transEj1:hover #rotateY {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 hace que el elemento #rotateY rote 180grados vertitcalmente.
c)#transEj1:hover #rotateZ {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 hace que el elemento #rotateZ rote 180grados en profundidad.
*/
b) Explica el significado de cada una de las partes del código (por #transEj1 div indica los estilos que se aplicarán a div dentro de elementos con id=”transEj1”. transition: all indica que …, 2s indica que … , ease-in-out indica que…, etc.)
Despues de buscar mucho por internet lo que he encontrado sobre la propiedad perspective, es lo siguiente: Propiedad que permite modificar la distancia de la perspectiva 3d con la que mostrarán todos sus objetos hijos.
Nota: Esta propiedad puede combinarse con la propiedad perspective-origin.
Sintaxis
perspective: valor;
valor Distancia de la perspectiva. Es recomendable especificar el valor en pixeles. (por defecto es none / 0)
Nota: Solo es aplicable para transformaciones 3D.
Compatibilidad
Esta propiedad está soportada por todos los navegadores compatibles con CSS3
Soportado a partir de la versión 12 con el prefijo -webkit-
Soportado a partir de la versión 16
Soportado a partir de la versión 15 con el prefijo -webkit-
Soportado a partir de la versión 5 con el prefijo -webkit-
Soportado a partir de la versión 10
a) #transEj1:hover #rotateX {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 hace que el elemento #rotateX rote 180grados horizontalmente.
b)#transEj1:hover #rotateY {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 hace que el elemento #rotateY rote 180grados vertitcalmente.
c)#transEj1:hover #rotateZ {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 hace que el elemento #rotateZ rote 180grados en profundidad.
-
Hola!
Los efectos te han quedado muy bien y veo bien tanto el código como las respuestas
Saludos!