Lenguaje-de-Marcas/CSS/CSS12/ejercicio1.html at master · CIFPDAW/Lenguaje-de-Marcas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
   <head>
      <title>Efectos </title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="ejercicio1.css"/>
   <body>
      <!--ROTATE-->
      <h2>CSS transform: rotate</h2>
      <div id ="normal" >Rotacion<img src="./img/images.jpg" ></div>
      <div id="rotar1"  >Rotacion Pos<img src="./img/images.jpg" ></div>
      <div id="rotar2"  >Rotacion Neg<img src="./img/images.jpg" ></div>
      <p style="clear: both; "></p>
      <!--SCALE-->
      <h2 style="margin-top:80px;">CSS transform: scale</h2>
      <div >Escalado<img src="./img/images.jpg" ></div>
      <div id="escala1">Escalado<img src="./img/images.jpg" ></div>
      <div id="escala2">Escalado<img src="./img/images.jpg" ></div>
      <p style="clear: both; "></p>
      <!--SKEWX-->
      <h2>CSS transform: skewX</h2>
      <div >Oblicuo X<img src="./img/images.jpg" ></div>
      <div id="skewX1" >Oblicuo X Pos<img src="./img/images.jpg" ></div>
      <div id="skewX2" >Oblicuo X Neg<img src="./img/images.jpg" ></div>
      <p style="clear: both; "></p>
      <!--SKEWY-->
      <h2>CSS transform: skewY</h2>
      <div >Oblicuo Y<img src="./img/images.jpg" ></div>
      <div id="skewY1" >Oblicuo Y Pos<img src="./img/images.jpg" ></div>
      <div id="skewY2" >Oblicuo Y Neg<img src="./img/images.jpg" ></div>
      <p style="clear: both; "></p>
      <!--TRANSLATE-->
      <h2>CSS transform: translate</h2>
      <div >Posicionamiento<img src="./img/images.jpg" ></div>
      <div  id="translate1">Posicionamiento<img src="./img/images.jpg" ></div>
      <div  id="translate2">Posicionamiento<img src="./img/images.jpg" ></div>
      <p style="clear: both; "></p>
      <!--COMBINADO CON HOVER-->
      <h2>CSS transform con hover</h2>
      <div id="contentBox1" >Hover<img src="./img/images.jpg" ></div>
      <p style="clear: both; "></p>
   </body>
</html>