Skew Card Hover
ホバーでわずかにスキューがかかるカード。
HTML
<div class="skew-card"> <div style="font-weight:700;font-size:14px">Reports</div> <div style="color:#999;font-size:12px;margin-top:4px">Weekly summary</div> </div>
CSS
.skew-card {
width: 180px;
padding: 24px;
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
cursor: pointer;
transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.skew-card:hover {
transform: perspective(600px) rotateY(-3deg) scale(1.02);
box-shadow: 8px 8px 24px rgba(0,0,0,.05);
}