Kart 24

3D Hover
3D Hover
.cards24 {
perspective: 500px;
}

.card24 {
width: 200px;
height: 250px;
background: #16161d;
border: 2px solid #555555;
border-radius: 4px;
position: relative;
transform-style: preserve-3d;
will-change: transform;
transition: transform .5s;
}

.card24:hover {
transform: translateZ(10px) rotateX(20deg) rotateY(20deg);
}

.card24_title {
color: #fff;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
transition: transform .5s;
font: 700 1.5rem monospace;
text-shadow: -1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

.card24:hover .card24_title {
transform: translateZ(50px);
}