Buenas! Mi ejercicio CU01062D del manual de programación web con CSS y editor Notepad++
Modifiqué algunos valores para hacer mas prolijo el ejercicio.
HTML:
<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS-Ejfinal(62).css">
</head>
<body>
<h2> Imagen Original </h2>
<div>
<img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
</div>
<h2> Imagen Skew </h2>
<div id="skew">
<img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
</div>
<h2> Imagen Scale </h2>
<div id="scale">
<img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
</div>
<h2> Imagen Rotate </h2>
<div id="rotate">
<img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
</div>
<h2> Imagen Translate </h2>
<div id="translate">
<img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
</div>
<h2> Imagen con varios efectos </h2>
<div id="rotate-skew-scale-translate">
<img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
</div>
</body>
</html>
CSS:
#skew {transform:skew(35deg);}
/*#skew indica el estilo que se aplicará a los elementos con atributo id=”skew”. Transform:skew(35deg); indica un sesgado del elemento de 35 grados sobre el eje x ya que no se menciona un segundo valor que corresponderia al eje y.*/
#scale {transform:scale(1,0.5);}
/*#scale indica el estilo que se aplicará a los elementos con atributo id=”scale”. transform:scale(1,0.5); indica un scalado del elemento de 1 sobre X (horizontal) y 0.5 sobre Y (vertical).*/
#rotate {transform:rotate(2deg);}
/*#rotate indica el estilo que se aplicará a los elementos con atributo id=”rotate”. transform:rotate(2deg); indica una rotación del elemento a 2grados.*/
#translate {transform:translate(20px, 10px);}
/*#translate indica el estilo que se aplicará a los elementos con atributo id=”translate”.
transform:translate(20px, 10px) indica una traslación de 20px (primer valor sobre eje x) y 10px sobre el eje y*/
#rotate-skew-scale-translate {transform:skew(20deg) scale(1.1,1.1) rotate(-20deg) translate(10px, 20px);}
/*#rotate-skew-scale-translate indica el estilo que se aplicará a los elementos con atributo id=”rotate-skew-scale-translate”.
transform:skew(20deg):Indica un sesgado de 20 grados sobre el eje x.
scale(1.1,1.1): Indica un escalado de 1.1 sobre el eje x (horizontal) y 1.1 sobre el eje y (vertical).
rotate(-20deg): Define una rotacion de -20 grados del elemento.
translate(10px, 20px): Indica una traslacion de 10px sobre el eje x y 20 px sobre el eje y.*/
Tema: HTML y CSS con Notepad++ Rotar, escalar, sesgar, trasladar transform. CU01062D (Leído 2619 veces)
RSS -
WAP2