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>