← All elements
<div class="wrapper">
<div class="card">
<h1>
<span class="enclosed">Cut</span>out
</h1>
</div>
</div>About this card
A tilted yellow card with a word cut out of it in black. On hover the card straightens in 3D and the cut-out seems to sit behind the surface.
How it works
The card is tilted in 3D with rotateY and rotateX inside a perspective wrapper. One word is set in a black block with the card colour as text, which looks like a hole cut through the card. On hover the wrapper removes the transform so the card turns flat to face you.
Ways to customise it
- Change the yellow rgba values for another card colour.
- Edit the rotateY and rotateX angles.
- Replace Cut and out with your own words.
Good to know
The transform only runs on hover, so touch users see the tilted state. Keep the text large and high contrast, as it is here.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.