Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
- let text = 'dizzy' - let n = 40; body(style=`--n: ${n}`) .a3d while n-- .lyr(style=`--i: ${n}`) #{text}
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } $t: 4s; @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap'); html, body, div { display: grid } html { min-height: 100% } body { overflow: hidden; margin: 0; perspective: 65em; perspective-origin: 50% -25%; background: currentcolor; color: #212121 } .a3d { --m: calc(.5*(var(--n) - 1)); place-self: center; rotate: x 90deg; transform-style: preserve-3d } .lyr { grid-area: 1/ 1; translate: 0 0 calc((var(--i) - .5*var(--n))*min(.75rem, 50vh/var(--n))); -webkit-text-stroke: 4px hotpink; font: 900 20vmin anton, sans-serif; text-transform: uppercase; animation: r $t cubic-bezier(.68, -.65, .32, 1.65) calc((var(--i)/var(--n) - 1)*#{$t}) infinite } @keyframes r { to { rotate: 1turn } }
console.log("Event Fired")