Perspective highlight
Highlighted text that lifts off the page on hover using CSS perspective and transform, from this article.
<style>
body {
margin: 0;
display: grid;
place-items: center;
min-height: 100vh;
background: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.perspective-container {
perspective: 1100px;
padding: 48px;
}
.perspective-distant {
transform-style: preserve-3d;
}
.perspective-card {
width: 530px;
font-size: 20px;
line-height: 1.6;
text-wrap: pretty;
color: #9aa5b8;
transform: rotateX(0deg) rotateY(0deg);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.perspective-container:hover .perspective-card {
transform: rotateX(14deg) rotateY(-28deg);
}
.perspective-card span {
display: block;
background: rgba(160, 200, 255, 0.75);
color: white;
font-style: italic;
border-radius: 6px;
padding: 2px 7px;
display: inline-block;
transition:
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 0.3s;
}
.perspective-container:hover .perspective-card span {
transform: translate(-7px, -6px);
box-shadow:
rgba(120, 170, 255, 0.9) 2px 1.5px 0px 0.5px,
rgba(120, 170, 255, 0.3) 8px 5px 10px 0px;
}
</style>
<div class="perspective-container">
<div class="perspective-distant">
<div class="perspective-card">
I have never been overconcerned or obsessed with opinion polls or
popularity polls. I think a leader who is, is a weak leader.
<span>If you are concerned with whether your rating will go up or</span>
<span>down, then you are not a leader.</span> You are just catching the
wind.
</div>
</div>
</div>