Ejercicio 5
.rotate{
transform: rotate(30deg);
}
.skew{
transform: skew(50deg);
}
.scale{
transform: scale(0.5, 0.5);
}
.translate{
transform: translate(10px, 10px);
}
timage:hover{color:blue;font-size:18px;}
timage {transition-property: rotate(10deg) transition-duration: 0.7s;transition-timing-function: linear;transition-delay: 0.2s;}
HTML
< !DOCTYPE html>
< html lang="es">
< head>
< meta charset="utf-8">
< title>Supuesto practico completo/Etiquetas< /title>
< link rel="stylesheet" href="Estilofinal.css">
< /head>
< < body>
< header>
< h1>Ejercicio de estilos CSS< /h1>
< /header>
< br>
< br>
< body>
< h3>Imagen normal< /p>
< br> < br>
< figure> < img src="imagen.png"> < /figure>
< br> < br>
< p>Imagen rotada< /p>
< br> < br>
< figure class="rotate"> < img src="imagen.png"> < /figure>
< br>
< br>
< p>Imagen en perspectiva< /p>
< br> < br>
< figure class="skew"> < img src="imagen.png"> < /figure>
< br> < br>
< p>Imagen desplazada< /p>
< br> < br>
< figure class="translate"> < img src="imagen.png"> < /figure>
< br> < br>
< br>
< br>
< timage id="pie">Pasar el ratón por encima del texto para ver como cambia de color< /timage>
< br>
< br>
< /body>
< /html>
Ejercicio de estilos CSS
Imagen normal
Imagen rotada
Imagen en perspectiva
Imagen desplazada