Box (ยัง บ่ เสร็จ)
✨ NATTAPONG WAIJAREE
<html> <head> <title>Let's Start </title> <style> body{ margin:3em; } .cover{ width:300px; margin:auto; font-size: 0; /* transform-style:; */ /* transform:; */ transition: .3s; cursor: pointer; position:relative; transform:skewX(-10deg); transform-style: preserve-3d; animation: x 4s infinite; z-index:1; } .cover img{ width:100%; } .paper-1 { background: linear-gradient(to right,#eee,#ddd); right: -20px; top: -2; width: 20px; height: 100%; /* transform-origin:; */ /* transform:; */ border-right: 1px solid #999; transform:skewY(50deg); transform-origin: left; } .paper-2 { background: linear-gradient(to bottom,#eee,#ddd); left:-3; bottom: -20px; width: 100%; height: 20px; /* transform-origin:; */ /* transform:; */ border-bottom: 1px solid #999; transform:skewX(50deg); transform-origin: top; z-index:1; position:absolute; } .paper-3 { background: linear-gradient(to right,yellow,yellow); right: 280px; top: -.1; width: 20px; height: 100%; /* transform-origin:; */ /* transform:; */ border-right: 1px solid #999; transform:skewY(50deg); transform-origin: left; position:absolute; z-index: 0; } .paper { position: absolute; box-sizing: border-box; z-index: 50; } .cover:hover{ 50%{transform: translateY(-50px);} } @keyframes x{ 25% { transform: translateX(50px); transform-style: preserve-3d; } 50% { transform: translatey(80px) rotatey(-360deg); transform-style: preserve-3d; } } </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> </body> </html>