Skew Transform Card
Stylish skew transform card with hover effect and perspective
Code
.skew-card {
width: 300px;
height: 200px;
background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
border-radius: 8px;
transform: skew(-10deg);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.skew-card:hover {
transform: skew(-10deg) scale(1.05);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.skew-content {
transform: skew(10deg);
color: white;
font-size: 24px;
font-weight: bold;
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="skew-card"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="skew-content"</span>>Skew Card</"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>