Hola! Dejo mi respuesta al ejercicio CU01062D del tutorial básico del programador web CSS desde cero.
Apartado a)
Código html
<head>
<meta charset="utf-8">
<title>Ejercicio 1062</title>
<style type="text/css">
*{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;}
#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);}
</style>
</head>
<body>
<!--SKEW-->
<h2>CSS transform:skew(35deg)</h2>
<div style="outline:solid blue thin; float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius:40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<div style="outline:solid blue thin; float:left; border-style:none; border-width:0; background-color:white;">
<div id="skew" style="border-radius:40px; margin-top:50px;">aprendeaprogramar.com<img
src="http://i.imgur.com/afC0L.jpg"></a></div>
</div>
<p style="clear:both;"></p>
<!--SCALE-->
<h2 style="margin-top:80px;">CSS transform:scale(1,0.5)</h2>
<div style="outline:solid blue thin; float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius:40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"></div>
</div>
<div style="outline:solid blue thin; float:left; border-style:none; border-width:0; background-color:white;">
<div id="scale" style="border-radius:40px; margin-top:50px;">aprenderaprogramar.com<img
src="http://i.imgur.com/afC0L.jpg"></a></div>
</div>
<p style="clear:both;"></p>
<!--SKEWX-->
<h2>CSS transform:rotate(45deg)</h2>
<div style="outline:solid blue thin; float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius:40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"></div>
</div>
<div style="outline:solid blue thin; float:left; border-style:none; border-width:0; background-color:white;">
<div id="rotate" style="border-radius:40px; margin-left:40px;">aprenderaprogramar.com<img
src="http://i.imgur.com/afC0L.jpg"></a></div>
</div>
<p style="clear:both;"></p>
<!--SKEWY-->
<h2>CSS transform:translate(10px, 20px)</h2>
<div style="outline:solid blue thin; float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></div>
</div>
<div style="outline:solid blue thin; float:left; border-style:none; border-width:0; background-color:white;">
<div id="translate" style="border-radius:40px; margin-left:40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<p style="clear: both; "></p>
<!--TRANSLATE-->
<h2>CSS transform:transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px)</h2>
<div style="outline:solid blue thin; float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></div>
</div>
<div style="outline:solid blue thin; float:left; border-style:none; border-width:0; background-color:white;">
<div id="rotate-skew-scale-translate" style="border-radius: 40px; margin-left: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<p style="clear: both; "></p>
</body>
</html>
Siguiendo con el apartado b)
#skew indica el estilo que se aplicará a los elementos con atributo id=”skew”.
Transform:skew(35deg) indica que … inclina el elemento 35 grados desde la vertical hacia atrás.
#scale hace que el elemento con atributo id="scale", se le aplique...
transform:scale(1,0.5): esto hace que se le aplique una escala de 1:1
en el eje de las X, y una escala 1:2 en el eje de las Y.
#rotate indica el estilo que se aplicará a los elementos con atributo id=”rotate".
transform:rotate(45deg): esto hace que el elemento rote 45 grados en el sentido
de las manillas del reloj.
#translate hace que el elemento con atributo id="translate", se le aplique...
transform:translate(10px, 20px): 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 hace que el elemento con atributo
id="rotate-skew-scale-translate", se le aplique...
transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px): 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 de las X, y de 1:0,9 en el eje de las Y, que
rote 40 grados en el sentido de las manillas del reloj, y que se mueva, 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".
Un saludo!
Tema: Efectos HTML CSS transform ejemplos rotate scale skew translate CU01062D (Leído 3698 veces)
RSS -
WAP2