3D Transform CSS Style

 3D Transform:-

Code:-

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        body{

            margin: 0;

            padding: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            background: #36363c;

        }

        .box{

            position: relative;

            width: 300px;

            height: 576px;

            background:url(resources/n3.jpg);

            background-size: 150%;

            transform: rotate(-45deg) skewY(25deg);

            box-shadow: -25px 40px 4px rgba(0,0,0,.2);

            transition: .5s;

        }

        .box:hover{

            transform: rotate(-45deg) skewY(25deg) translate(20px,-20px);

            box-shadow: -25px 40px 4px rgba(0,0,0,.5);

        }

        .box:before{

            content:'';

            position: absolute;

            top: 0;

            left: -20px;

            height: 100%;

            width: 20px;

            background: #e4e4e4;

            box-sizing: border-box;

            border-top: 576px solid #78db6f;

            transform-origin:right;

            transform: skewY(-58deg);

        }

        .box::after{

            content:'';

            position: absolute;

            bottom: -32px;

            left: 0px;

            height: 32px;

            width: 100%;

            background: #78db6f;

            box-sizing: border-box;

            transform-origin:top;

            transform: skewX(-32deg);

        }

        .box .glass{

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background:rgba(255,255,255,0,.001);

            box-shadow: 0 0 10px rgba(0,0,0,0);

            transition:0.5s;

            overflow: hidden;

        }

        .box .glass:before{

            content: '';

            position:absolute;

            top: 0;

            left: -50%;

            width: 100%;

            height: 100%;

            background:rgba(255,255,255,0.05);

            transform:skewX(-5deg);

        }

        .box:hover .glass{

            top: -40px;

            left:30px;

            background:rgb(255,255,255,0.05);

            box-shadow:-2px 2px 10px rgba(0,0,0,0.2);

        }

        .box:hover .glass:nth-child(2){

            top: -80px;

            left:60px;

            background:rgb(255,255,255,0.05);

            box-shadow:-2px 2px 10px rgba(0,0,0,0.2);

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="glass"></div>

        <div class="glass"></div>

    </div>

</body>

</html>

Output:-