Hola a todos, y bienvenidos una vez más a una nueva clase de nuestro curso de Introducción a CSS 3. Comenzamos la recta final con la novena y penúltima clase.
En esta ocasión, conoceremos cómo podemos modificar elementos que ya han sido creados anteriormente en la página web.
Usaremos la etiqueta transform para ello.
Lo haremos utilizando algunos de los consejos que has aprendido a lo largo de este curso, en lecciones anteriores.
¡Empezamos!
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html>
<head>
<title>Clase con transformaciones</title>
<style>
#div1 {
height: 200px;
width: 200px;
border: 1px solid black;
}
#transformar {
height: 100px;
width: 100px;
border: 1px solid green;
background-color: green;
transform: skew(-20deg);
transform-origin: 40% 100%;
}
#transformar:hover{
transform: skew(-40deg);
transform-origin: 40% 100%;
}
</style>
</head>
<body>
<div id="div1">
<div id="transformar"> <p>texto</p></div>
</div>
</body>
</html>