Box (Branch 4240)
✨ SOMCHAI CHONGRACHEN
<html> <head> <title>Let's Start </title> <style> body{ margin:10em; } .cover{ width:300px; margin:auto; font-size: 0; transform-style:preserve-3d; transform:rotatez(0deg) rotatex(20deg) rotatey(-30deg); transition: .3s; cursor: pointer; position:relative; animation: ani 5s infinite alternate; } .cover:hover{ transform:rotatez(0deg) rotatex(20deg) rotatey(30deg); } @keyframes ani{ 0% {transform: rotatex(-20deg) rotatey(-30deg)} 50% {transform: rotatex(60deg) rotatey(-90deg)} 100% {transform: rotatex(-200deg) rotatey(90deg)} } .cover img{ width:100%; } .paper-1 { background: linear-gradient(to right,#eee,#ddd); right: -20px; top: 0; width: 20px; height: 100%; transform-origin: left; transform:rotatey(90deg); border-right: 1px solid #999; } .paper-2 { background: linear-gradient(to bottom,#eee,#ddd); left: 0; bottom: -20px; width: 100%; height: 20px; transform-origin: top; transform:rotatex(-90deg); border-bottom: 1px solid #999; } .paper-3 { background: linear-gradient(to right,#e8b950,#af9754); left: 0px; top: 0; width: 20px; height: 100%; transform-origin: left; transform:rotatey(90deg); border-right: 1px solid #999; } .paper-4 { background: linear-gradient(to bottom,#eee,#ddd); left: 0; top: 0px; width: 100%; height: 20px; transform-origin: top; transform:rotatex(-90deg); border-bottom: 1px solid #999; } .paper { position: absolute; box-sizing: border-box; z-index: 50; } </style> </head> <body> <div class="cover"> <img src="https://content.shopback.com/th/wp-content/uploads/2019/05/01185252/pic9_phralan.in_.th_.jpg"> <div class="paper paper-1"> </div> <div class="paper paper-2"> </div> <div class="paper paper-3"> </div> <div class="paper paper-4"> </div> </div> </body> </html>