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.
<!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....
/*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".
Tema: Efectos css rotar transform: rotate, scale, skew, translate Ejercicio CU01062D (Leído 4322 veces)
RSS -
WAP2