If you’re building a fancy website or something the kids are going to love, you should consider adding 3D Text effects there. These CSS codes are some of the finest we have found out there. They are mostly without JS and made of pure CSS – which is a joy to use.
<h1 data-splitting>Just hanging out</h1>
@import url('https://fonts.googleapis.com/css?family=Nova+Mono&display=swap');
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #18181c;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-family: 'Nova Mono', monospace;
font-size: 2.25rem;
text-transform: uppercase;
width: 1096px;
height: 365px;
color: goldenrod;
perspective: 900px;
}
.char {
offset-path: path('M.5 122.7s24.7-275 276.9 0c327.1 356.7 266.1-330.3 548-33.3 256.9 270.7 271.1 0 271.1 0');
offset-distance: calc(var(--char-index) * 1.75rem);
position: absolute;
animation: wave 2200ms cubic-bezier(.62,.01,.42,1.01) infinite alternate calc(var(--char-index) * 20ms), wave2 2200ms cubic-bezier(.62,.01,.42,1.01) infinite alternate calc(var(--char-index) * 20ms);
transform: perspective(800px) scale(1) rotate3d(0, 0, 0, 0);
}
@keyframes wave {
100% {
offset-distance: calc((var(--char-index) * 3rem) + 300px);
transform: perspective(800px) scale(1.25) rotate3d(1, 0, 0, 180deg);
color: red;
}
}
@keyframes wave2 {
100% {
offset-distance: calc((var(--char-index) * 3.45rem) + 600px);
transform: perspective(800px) scale(1.75) rotate3d(1, 0, 0, 360deg);
color: goldenrod;
}
}
Splitting({
whitespace: true
})
[codepen_embed height=”365″ theme_id=”dark” slug_hash=”VwYOvJG” default_tab=”result” user=”michellebarker”][/codepen_embed]
.
[codepen_embed height=”365″ theme_id=”dark” slug_hash=”GdrrZq” default_tab=”result” user=”comehope”][/codepen_embed].
[codepen_embed height=”365″ theme_id=”dark” slug_hash=”OoYQBJ” default_tab=”result” user=”shubniggurath”][/codepen_embed].
[codepen_embed height=”365″ theme_id=”dark” slug_hash=”yLBwdJX” default_tab=”result” user=”kylewetton”][/codepen_embed].
[codepen_embed height=”365″ theme_id=”dark” slug_hash=”onfgi” default_tab=”result” user=”hugo”][/codepen_embed]
Awesome post! Keep up the great work! 🙂