پیشنمایش زنده
کد HTML
<section
class="relative group flex flex-col items-center justify-center w-full h-full"
>
<div
class="file relative w-60 h-40 cursor-pointer origin-bottom [perspective:1500px] z-50"
>
<div
class="work-5 bg-amber-600 w-full h-full origin-top rounded-2xl rounded-tl-none group-hover:shadow-[0_20px_40px_rgba(0,0,0,.2)] transition-all ease duration-300 relative after:absolute after:content-[''] after:bottom-[99%] after:left-0 after:w-20 after:h-4 after:bg-amber-600 after:rounded-t-2xl before:absolute before:content-[''] before:-top-[15px] before:left-[75.5px] before:w-4 before:h-4 before:bg-amber-600 before:[clip-path:polygon(0_35%,0%_100%,50%_100%);]"
></div>
<div
class="work-4 absolute inset-1 bg-zinc-400 rounded-2xl transition-all ease duration-300 origin-bottom select-none group-hover:[transform:rotateX(-20deg)]"
></div>
<div
class="work-3 absolute inset-1 bg-zinc-300 rounded-2xl transition-all ease duration-300 origin-bottom group-hover:[transform:rotateX(-30deg)]"
></div>
<div
class="work-2 absolute inset-1 bg-zinc-200 rounded-2xl transition-all ease duration-300 origin-bottom group-hover:[transform:rotateX(-38deg)]"
></div>
<div
class="work-1 absolute bottom-0 bg-gradient-to-t from-amber-500 to-amber-400 w-full h-[156px] rounded-2xl rounded-tr-none after:absolute after:content-[''] after:bottom-[99%] after:right-0 after:w-[146px] after:h-[16px] after:bg-amber-400 after:rounded-t-2xl before:absolute before:content-[''] before:-top-[10px] before:right-[142px] before:size-3 before:bg-amber-400 before:[clip-path:polygon(100%_14%,50%_100%,100%_100%);] transition-all ease duration-300 origin-bottom flex items-end group-hover:shadow-[inset_0_20px_40px_#fbbf24,_inset_0_-20px_40px_#d97706] group-hover:[transform:rotateX(-46deg)_translateY(1px)]"
></div>
</div>
<p class="text-3xl pt-4 opacity-20">Hover over</p>
</section>
کد CSS
.absolute{position:absolute}.relative{position:relative}.inset-1{inset:0.25rem}.bottom-0{bottom:0px}.z-50{z-index:50}.flex{display:flex}.h-40{height:10rem}.h-\[156px\]{height:156px}.h-full{height:100%}.w-60{width:15rem}.w-full{width:100%}.origin-bottom{transform-origin:bottom}.origin-top{transform-origin:top}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-2xl{border-radius:1rem}.rounded-tl-none{border-top-left-radius:0px}.rounded-tr-none{border-top-right-radius:0px}.bg-amber-600{--tw-bg-opacity:1;background-color:rgb(217 119 6 / var(--tw-bg-opacity))}.bg-zinc-200{--tw-bg-opacity:1;background-color:rgb(228 228 231 / var(--tw-bg-opacity))}.bg-zinc-300{--tw-bg-opacity:1;background-color:rgb(212 212 216 / var(--tw-bg-opacity))}.bg-zinc-400{--tw-bg-opacity:1;background-color:rgb(161 161 170 / var(--tw-bg-opacity))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.from-amber-500{--tw-gradient-from:#f59e0b var(--tw-gradient-from-position);--tw-gradient-to:rgb(245 158 11 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-amber-400{--tw-gradient-to:#fbbf24 var(--tw-gradient-to-position)}.pt-4{padding-top:1rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.opacity-20{opacity:0.2}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.\[perspective\:1500px\]{perspective:1500px}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:-top-\[10px\]::before{content:var(--tw-content);top:-10px}.before\:-top-\[15px\]::before{content:var(--tw-content);top:-15px}.before\:left-\[75\.5px\]::before{content:var(--tw-content);left:75.5px}.before\:right-\[142px\]::before{content:var(--tw-content);right:142px}.before\:size-3::before{content:var(--tw-content);width:0.75rem;height:0.75rem}.before\:h-4::before{content:var(--tw-content);height:1rem}.before\:w-4::before{content:var(--tw-content);width:1rem}.before\:bg-amber-400::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(251 191 36 / var(--tw-bg-opacity))}.before\:bg-amber-600::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(217 119 6 / var(--tw-bg-opacity))}.before\:content-\[\'\'\]::before{--tw-content:'';content:var(--tw-content)}.before\:\[clip-path\:polygon\(0_35\%\2c 0\%_100\%\2c 50\%_100\%\)\;\]::before{content:var(--tw-content);-webkit-clip-path:polygon(0 35%,0% 100%,50% 100%);;clip-path:polygon(0 35%,0% 100%,50% 100%);}.before\:\[clip-path\:polygon\(100\%_14\%\2c 50\%_100\%\2c 100\%_100\%\)\;\]::before{content:var(--tw-content);-webkit-clip-path:polygon(100% 14%,50% 100%,100% 100%);;clip-path:polygon(100% 14%,50% 100%,100% 100%);}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:bottom-\[99\%\]::after{content:var(--tw-content);bottom:99%}.after\:left-0::after{content:var(--tw-content);left:0px}.after\:right-0::after{content:var(--tw-content);right:0px}.after\:h-4::after{content:var(--tw-content);height:1rem}.after\:h-\[16px\]::after{content:var(--tw-content);height:16px}.after\:w-20::after{content:var(--tw-content);width:5rem}.after\:w-\[146px\]::after{content:var(--tw-content);width:146px}.after\:rounded-t-2xl::after{content:var(--tw-content);border-top-left-radius:1rem;border-top-right-radius:1rem}.after\:bg-amber-400::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(251 191 36 / var(--tw-bg-opacity))}.after\:bg-amber-600::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(217 119 6 / var(--tw-bg-opacity))}.after\:content-\[\'\'\]::after{--tw-content:'';content:var(--tw-content)}.group:hover .group-hover\:shadow-\[0_20px_40px_rgba\(0\2c 0\2c 0\2c \.2\)\]{--tw-shadow:0 20px 40px rgba(0,0,0,.2);--tw-shadow-colored:0 20px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group:hover .group-hover\:shadow-\[inset_0_20px_40px_\#fbbf24\2c _inset_0_-20px_40px_\#d97706\]{--tw-shadow:inset 0 20px 40px #fbbf24, inset 0 -20px 40px #d97706;--tw-shadow-colored:inset 0 20px 40px var(--tw-shadow-color), inset 0 -20px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group:hover .group-hover\:\[transform\:rotateX\(-20deg\)\]{transform:rotateX(-20deg)}.group:hover .group-hover\:\[transform\:rotateX\(-30deg\)\]{transform:rotateX(-30deg)}.group:hover .group-hover\:\[transform\:rotateX\(-38deg\)\]{transform:rotateX(-38deg)}.group:hover .group-hover\:\[transform\:rotateX\(-46deg\)_translateY\(1px\)\]{transform:rotateX(-46deg) translateY(1px)}