Códicos y explicación del ejercicio CU01062D del curso CSS desde cero.
Enunciado:
Estudia el siguiente código CSS y responde a las cuestiones planteadas:
#skew { transform:skew(35deg); }
#scale { transform:scale(1,0.5); }
#rotate { transform:rotate(45deg); }
#translate { transform:translate(10px, 20px); }
#rotate-skew-scale-translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }
a) Crea un documento HTML donde se vean los estilos que tenemos en el código aplicados a distintos elementos.
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 …)
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos98.css"/>
<title>Portal web</title>
</head>
<body>
<!-- ROTATE -->
<h2>CSS transform: skew</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="skew" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></a></div>
</div>
<p style="clear: both;"></p>
<!-- SCALE -->
<h2>CSS transform: scale</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="scale" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
<!-- SKEWX -->
<h2>CSS transform: rotate</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="rotate" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
<!-- TRANSLATE -->
<h2>CSS transform: translate</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="translate" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
<!-- COMBINADO CON HOVER -->
<h2>CSS transform: rotate-skew-scale-translate</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="caja1" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
</body>
</html>Código CSS: "estilos98.css" (las explicaciones están al final del código)
#skew:hover {
transform: skew(35deg);
}
#scale:hover {
transform: scale(1,0.5);
}
#rotate:hover {
transform: rotate(45deg);
}
#translate:hover {
transform: translate(10px, 20px);
}
#caja1:hover {
transform: skew(30deg)scale(1.1,1.1)rotate(40deg)translate(10px,20px);
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
div {
border: 5px solid;
width: 260px;
margin: 10px;
background-color: yellow;
font-size: 20px;
text-align: center;
padding-top: 20px;
word-wrap: break-word;
}
h2 {
margin: 15px 0 -15px 40px;
}
img {
padding: 10px;
}
/* Mediante la propiedad: #skew {transform: skew(35deg);} se aplica al elemento #skew un sesgado de 35grados en horizontal.
Con la propiedad: #scale {transform: scale(1,0.5);} aplicamos al elemento con selector #scale una escala de 1 en horizontal (es decir, queda igual) y de 0.5 en vertical. El mismo efecto se podría conseguir sólo con la propiedad: scaleY(0.5).
A través de la propiedad: #rotate {transform: rotate(45deg);} conseguimos con el elemento #rotate gire 45grados a la derecha.
Medianete la propiedad: #translate {transform: translate(10px,20px);} movemos dicho elemento 10px a la derecha y 20px hacia abajo con referencia a su ubicación inicial.
Por último, con la propiedad: #rotate-skew-scale-translate {transform: skew(30deg)scale(1.1,1.1)rotate(40deg)translate(10px,20px);} aplicamos al elemento #rotate-skew-scale-translate todas las transformaciones a la vez. O sea, le sesgamos 35grados en horizontal, le aplicamos una escala de 1.1 horizontalmente y otra de 1.1 verticalmente, lo rotamos 40grados a la derecha y lo tralsadamos 10px horizontalmente (a la derecha, porque es un valor positivo) y 20px verticalmente (hacia abajo porque es un valor positivo).*/Significado de las distintas partes del código:Mediante la propiedad: #skew {transform: skew(35deg);} se aplica al elemento #skew un sesgado de 35grados en horizontal.
Con la propiedad: #scale {transform: scale(1,0.5);} aplicamos al elemento con selector #scale una escala de 1 en horizontal (es decir, queda igual) y de 0.5 en vertical. El mismo efecto se podría conseguir sólo con la propiedad: scaleY(0.5).
A través de la propiedad: #rotate {transform: rotate(45deg);} conseguimos con el elemento #rotate gire 45grados a la derecha.
Medianete la propiedad: #translate {transform: translate(10px,20px);} movemos dicho elemento 10px a la derecha y 20px hacia abajo con referencia a su ubicación inicial.
Por último, con la propiedad: #rotate-skew-scale-translate {transform: skew(30deg)scale(1.1,1.1)rotate(40deg)translate(10px,20px);} aplicamos al elemento #rotate-skew-scale-translate todas las transformaciones a la vez. O sea, le sesgamos 35grados en horizontal, le aplicamos una escala de 1.1 horizontalmente y otra de 1.1 verticalmente, lo rotamos 40grados a la derecha y lo tralsadamos 10px horizontalmente (a la derecha, porque es un valor positivo) y 20px verticalmente (hacia abajo porque es un valor positivo).
Gracias.
Tema: CSS HTML efecto sesgado escalado rotación traslación rotate-skew-scale CU01062D (Leído 2985 veces)
RSS -
WAP2