Efectos CSS. transform: rotate, scale, skew y translate. Rotar, escalar, sesgar, trasladar. Ejemplos. (CU01062D)Aquí les dejo el codigo
CSS dejada por el curso, ejercicio CU01062D del tutorial de programación web:
#caja{width:75%; margin: auto;}#skew,#scale,#rotate,#translate,#rotate-skew-scale-translate{width: 150px; margin: 50px; padding: 10px; background-color: red; border-style: solid;}/*esto es mio*/
#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); }También les dejo mi código
HTML para poder visualizarlo:
<html>
<head>
<title>Transform</title>
<link rel="stylesheet" type="text/css" href="Transform.css">
</head>
<body><div id="caja">
<div id="skew"><img src="http://i.imgur.com/afC0L.jpg" alt="Error en la imagen"></div>
<div id="scale"><img src="http://i.imgur.com/afC0L.jpg" alt="Error en la imagen"></div>
<div id="rotate"><img src="http://i.imgur.com/afC0L.jpg" alt="Error en la imagen"></div>
<div id="translate"><img src="http://i.imgur.com/afC0L.jpg" alt="Error en la imagen"></div>
<div id="rotate-skew-scale-translate"><img src="http://i.imgur.com/afC0L.jpg" alt="Error en la imagen"></div>
</div>
</body>
</html>
#skew { transform:skew(35deg); }; el elemento cuya id sea "skew" sesgará 35 grados en la horizontal (Se vera como inclinado).
#scale { transform:scale(1,0.5); }; el elemento cuya id sea "scale" tendrá un tamaño a escala de 1 vez su anchura y 0.5 veces su altura.
#rotate { transform:rotate(45deg); }; El elemento cuya id sea "rotate" girara 45 grados a la derecha.
#translate { transform:translate(10px, 20px); }; El elemento cuya id sea "translate" se movera desde su posición original, 10px hacia abajo y 20px hacia la derecha.
#rotate-skew-scale-translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }; El elemento cuya id sea "rotate-skew-scale-translate" (que id tan larga
) sesgará 30 grados en la horizontal (mas o menos inclinado), tendrá 1.1 veces su ancho y 1.1 veces su altura, girara a la derecha unos 40 grados y se moverá desde su posición original 10px hacia abajo y 20px a la derecha.
Tema: CSS y HTML efectos dinámicos Transform: rotate, scale, skew, translate CU01062D (Leído 2922 veces)
RSS -
WAP2