CSS 2D Effects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D Transforma</title>
</head>
<style>
div {
margin: auto;
margin-bottom: 30px;
width: 300px;
height: 100px;
background-color: aqua;
color: blue;
border: 2px solid grey;
transition: 1s ease-in-out;
}
.translate:hover {
transform: translate(50px, 100px);
}
.rotate:hover {
transform: rotate(-180deg);
}
.skew-x:hover {
transform: skewX(30deg)
}
.skew-y:hover {
box-shadow: 10px 10px 5px red;
transform: Skew(30deg, -5deg)
}
.scale:hover {
box-shadow: -10px -10px 8px pink;
transform: scale(0.5, 0.5);
}
.scale+:hover {
box-shadow: -10px -10px 8px pink;
transform: scale(2, 3);
}
.matrix:hover {
box-shadow: -10px -10px 8px pink;
transform: matrix(1, -0.5, 0.5, 0, 1, 2);
}
</style>
<body>
<div class="normal">Normal div</div>
<div class="translate">T ranslated Div </div>
<div class="rotate">Rotated Div </div>
<div class="skew-x">Skew-X </div>
<div class="skew-y">Skew-Y</div>
<div class="scale">Scale -ve</div>
<div class="scale+">Scale +ve</div>
<div class="matrix">Matrix</div>
</body>
</html>
No comments:
Post a Comment