<div class="wrapper">
<div class="card">
<h1>
<span class="enclosed">Cut</span>out
</h1>
</div>
</div>
.wrapper {
position: relative;
perspective: 40em;
display: grid;
transform-style: preserve-3d;
}
.card {
grid-area: 1 / 1;
height: 200px;
width: 400px;
transform: translateX(10px) rotateY(25deg) rotateX(10deg);
background: rgba(249, 198, 26, 0.88);
display: flex;
justify-content: flex-start;
align-items: center;
padding: 30px;
color: #000;
text-transform: uppercase;
font-size: 60px;
font-weight: 900;
backface-visibility: hidden;
box-shadow: 0 10px 30px -3px rgba(0,0,0,.1);
}
h1 {
font-size: 60px;
font-weight: 900;
}
.card .enclosed {
background: #000;
line-height: 1;
color: rgba(249, 198, 26, 1);
padding: 0 5px;
display: inline-block;
transform: translate(-1px, 1px) scale(0.75);
transform-origin: right center;
}
.wrapper:before {
--bw: 9px;
grid-area: 1 / 1;
content: '';
backface-visibility: hidden;
height: 100%;
width: 100%;
margin-top: calc(-1 * var(--bw));
margin-left: calc(-1 * var(--bw));
background: transparent;
transform: translateX(-60px) rotateY(-30deg) rotateX(15deg) scale(1.03);
pointer-events: none;
border: var(--bw) solid #000;
box-sizing: content-box;
}
.wrapper:hover > div,
.wrapper:hover:before {
transform: none;
}
.wrapper > div,
.wrapper:before {
will-change: transform;
transition: .3s transform cubic-bezier(.25,.46,.45,1);
}
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background:
linear-gradient(to bottom right, #3C4BBD 15%, transparent),
radial-gradient(circle at 100% 0%, rgba(255,255,255,.2) 10%, transparent 20%) center center / 15px 15px,
linear-gradient(to bottom right, #3C4BBD, #57ADD8);
}
This Pen doesn't use any external JavaScript resources.