mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
45 lines
865 B
HTML
45 lines
865 B
HTML
<div class="cards">
|
|
<figure class="card">
|
|
<figcaption class="card_title">3D Hover</figcaption>
|
|
</figure>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Cornerstone-04 - Tags: card */
|
|
.cards {
|
|
perspective: 500px;
|
|
}
|
|
|
|
.card {
|
|
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;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateZ(10px) rotateX(20deg) rotateY(20deg);
|
|
}
|
|
|
|
.card_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;
|
|
}
|
|
|
|
.card:hover .card_title {
|
|
transform: translateZ(50px);
|
|
}
|
|
</style>
|