<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplos transiciones</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div id="transicion1">Hola que tal</div>
<div id="transicion2">Yo muy bien</div>
<div id="transicion3">Me alegro</div>
<div id="transicion4">Estamos en matrix</div>
</body>
</html>
div{
width: 200px;
height: 200px;
background-color: orange;
}
#transicion1{
transition: width 2s, transform 3s,background-color 4s;
}
#transicion1:hover{
transform: rotate(45deg);
width:300px;
background-color: darkgreen;
}
#transicion2{
background-color: blue;
transition: transform 3s,background-color 4s;
}
#transicion2:hover{
transform: skewX(45deg);
background-color: rgb(255, 225, 58);
}
#transicion3{
background-color: rgb(244, 35, 198);
transition: transform 3s,background-color 4s;
}
#transicion3:hover{
transform: rotateX(360deg);
background-color: #26e53d;
}
#transicion4{
background-color: rgb(75, 234, 255);
transition: transform 3s,background-color 4s;
}
#transicion4:hover{
transform: matrix(2,.3,.4,3,200,200);
background-color: #f4ff7a;
}
