Perspective Door Hover
ホバーでカードが3Dドアのように開くperspective+transform演出。
HTML
<div class="pdh-card">
<div class="pdh-door">
<h3>Open Door</h3>
</div>
<div class="pdh-content">
<p>Hidden content revealed</p>
</div>
</div>
CSS
.pdh-card {
position: relative;
width: 220px;
height: 160px;
perspective: 800px;
cursor: pointer;
}
.pdh-content {
position: absolute;
inset: 0;
background: #312e81;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #e2e8f0;
}
.pdh-content p { margin: 0; font-size: 13px; }
.pdh-door {
position: absolute;
inset: 0;
background: #1e293b;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #e2e8f0;
transform-origin: left center;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.pdh-door h3 { margin: 0; font-size: 16px; }
.pdh-card:hover .pdh-door {
transform: rotateY(-95deg);
}