SASS
*, ::before, ::after
box-sizing: border-box
margin: 0
padding: 0
body
align-items: center
background-color: #fde7fd
display: flex
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
-webkit-font-smoothing: none
justify-content: center
min-height: 100vh
.spin
perspective: 500px
position: relative
transform-style: preserve-3d
.spin-group
animation: 1.8s ease-in-out infinite alternate both spin-group
display: block
line-height: 0.8
text-align: center
transform-style: preserve-3d
will-change: transform
$highlight: #04e7fe
$text: #ff79ff
$shadow: #3f2e53
.spin-group-text
color: $text
font-size: 100px
font-weight: 700
text-shadow: -1px 0 $shadow, 1px 0 $shadow, 0 -1px $highlight
will-change: transform
&:nth-child(n+2)
position: absolute
top: 0
left: 0
@for $index from 2 through 20
&:nth-child(#{$index})
transform: translateZ(#{$index - 1}px)
@keyframes spin-group
from
transform: rotateY(-10deg) rotateX(-20deg)
to
transform: rotateY(10deg) rotateX(-20deg)
