Autor Tema: Efectos css rotar transform: rotate, scale, skew, translate Ejercicio CU01062D  (Leído 2561 veces)

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Buenas noches amigos, aquí os dejo la propuesta de mi ejercicio del curso css, a ver qué os parece. Gracias por vuestro tiempo como siempre. Saludos.

Os dejo la primera parte:

a) Crea un documento HTML donde se vean los estilos que tenemos en el código aplicados a distintos elementos.


Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="efectos css transform: rotate, skew, y translate">
<meta charset="utf-8">
<title>Efectos css transform: rotate, skew, y translate</title>
<link rel="stylesheet" type="text/css" href="estilos32.css">
</head>
<body>

<div style="float:left;border-style:none;border-width:0;background-color: white;">
<div id="skew">Propiedad skew <img src="https://lh4.googleusercontent.com/-QrvgsF9RKAo/U5F4qSiNXYI/AAAAAAAAA3M/vMjlEmgHl_w/s80/logo_css.jpg"></a></div>
</div>

<div style="float:left;border-style:none;border-width:0;background-color:white;">
<div id="scale">Propiedad scale <img src="https://lh4.googleusercontent.com/-QrvgsF9RKAo/U5F4qSiNXYI/AAAAAAAAA3M/vMjlEmgHl_w/s80/logo_css.jpg"></a></div>
</div>

<div style="float:left;border-style:none;border-width:0;background-color:white;">
<div id="rotate">Propiedad rotate <img src="https://lh4.googleusercontent.com/-QrvgsF9RKAo/U5F4qSiNXYI/AAAAAAAAA3M/vMjlEmgHl_w/s80/logo_css.jpg"></a></div>
</div>

<p style="clear:both;"></p>

<div style="float:left;border-style:none;border-width:0;background-color:white;">
<div id="translate">Propiedad translate <img src="https://lh4.googleusercontent.com/-QrvgsF9RKAo/U5F4qSiNXYI/AAAAAAAAA3M/vMjlEmgHl_w/s80/logo_css.jpg"></a></div>
</div>

<div style="float:left;border-style:none;border-width:0;background-color:white;">
<div id="rotate-skew-scale-translate">Propiedad shorthand rotate-skew-scale-translate <img src="https://lh4.googleusercontent.com/-QrvgsF9RKAo/U5F4qSiNXYI/AAAAAAAAA3M/vMjlEmgHl_w/s80/logo_css.jpg"></a></div>
</div>
</body>

</html>


y ahora el css....

Código: [Seleccionar]

/*Ejercicio CU01062D Efectos css. Transform: rotate, scale, skew y traslate rotar, escalar sesgar, y trasladar.*/

*{margin:0;padding:0;font-family:sans-serif;}

div{
border: 5px solid;
width: 300px;
margin: 30px;
background-color: yellow;
font-size: 25px;
text-align: center;
padding-top: 20px;
word-wrap: break-word;
border-radius: 45px;
}
img{padding: 10px;}
#skew{transform: skew(35deg)}/*#skew indica el estilo que se aplicará a los elementos con atributo id="skew"(35deg)indica que establece, que inclina el elemento 35 grados desde la vertical hacia atrás.*/
#scale{transform: scale(1,0.5);}/*#scale indica el estilo que se aplicará a los elementos con atributo id="scale" (1,0.5) indica que establece un escalado en horizontal de 1 y en vertical de 0.5.*/
#rotate{transform: rotate(45deg);}/*#rotate indica el estilo que se aplicará a los elementos con atributo id="rotate" (45deg) indica la rotación del elemento 45deg en este caso y en sentido al de las manillas del reloj.*/
#translate{transform: translate(10px, 20px);}/*#translate indica el estilo que se aplicará a los elementos con atributo id="translate" (10px, 20px) indica la translación del elemento, en este caso esto mueve el elemento, 10 pixels  hacia la derecha en el eje de las X, y 20 pixels hacia abajo en el eje de las Y.Con respecto a su posición "original".*/
#rotate-skew-scale-translate{transform: skew(30deg)scale(1.1,1.1)rotate(40deg)translate(10px, 20px);margin-left: 80px;}/*#rotate-skew-scale-translate indica el estilo que se aplicará a los elementos con atributo id="rotate-skew-scale-translate" indica que  esto inclina  el elemento 30 grados desde la vertical hacia atrás, que se le aplique una escala de 1:0,9 en el eje x (horizontal), y de 1:0,9 en el eje Y (vertical), querote 40 grados en el sentido de las manillas del reloj, y que se mueva, 10 pixels hacia la derecha en el eje X, y 20 pixels hacia abajo en el eje Y.Con respecto a su posición "original".*/




segunda parte:

b) Explica el significado de cada una de las partes del código (por ejemplo #skew indica el estilo que se aplicará a los elementos con atributo id=”skew”. Transform:skew(35deg) indica que …)

#skew indica el estilo que se aplicará a los elementos con atributo id="skew"(35deg)indica que establece, que inclina el elemento 35 grados desde la vertical hacia atrás.

#scale indica el estilo que se aplicará a los elementos con atributo id="scale" (1,0.5) indica que establece un escalado en horizontal de 1 y en vertical de 0.5.

#rotate indica el estilo que se aplicará a los elementos con atributo id="rotate" (45deg) indica la rotación del elemento 45deg en este caso y en sentido al de las manillas del reloj.

#translate indica el estilo que se aplicará a los elementos con atributo id="translate" (10px, 20px) indica la translación del elemento, en este caso esto mueve el elemento, 10 pixels  hacia la derecha en el eje de las X, y 20 pixels hacia abajo en el eje de las Y.Con respecto a su posición "original".

#rotate-skew-scale-translate indica el estilo que se aplicará a los elementos con atributo id="rotate-skew-scale-translate" indica que  esto inclina  el elemento 30 grados desde la vertical hacia atrás, que se le aplique una escala de 1:0,9 en el eje x (horizontal), y de 1:0,9 en el eje Y (vertical), querote 40 grados en el sentido de las manillas del reloj, y que se mueva, 10 pixels hacia la derecha en el eje X, y 20 pixels hacia abajo en el eje Y.Con respecto a su posición "original".
« Última modificación: 10 de Abril 2016, 21:15 por Mario R. Rancel »

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1948
    • Ver Perfil
Buenas tardes, ejercicio muy bien resuelto, enhorabuena

Saludos

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Muchas gracias por tu tiempo Mario. Esto me anima a seguir adelante...

Saludos.

 

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