-2.times do
 %h1{"data-splitting" => "chars"} T A K E • I T • E A S Y •
View Compiled
html {
    font-size: 1.5vmin;
}

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  perspective:40rem;
  background: linear-gradient(to right, #d9a7c7, #fffcdc);
  *{
    transform-style:preserve-3d;
    &:before, &:after{
      transform-style:preserve-3d;
    }
  }
  h1{
    color:transparent;
    position:absolute;
    width:0px;
    height:0px;
    margin:0;
    font-family:'Oswald';
    transform:translateY(-5rem) rotateX(40deg) rotate(0deg) rotateY(180deg);
    animation:rotate 8s linear infinite;
    @keyframes rotate{
      25%{
              transform:translateY(-5rem) rotateX(60deg) rotate(-90deg) rotateY(160deg);
      }
      50%{
              transform:translateY(-5rem) rotateX(60deg) rotate(-180deg) rotateY(180deg);
      }
      75%{
              transform:translateY(-5rem) rotateX(60deg) rotate(-270deg) rotateY(200deg);
      }
      100%{
        transform:translateY(-5rem) rotateX(40deg) rotate(-360deg) rotateY(180deg);
      }
    }
    &:nth-of-type(2){
      span.word{
        span{
          -webkit-text-fill-color: transparent;
          -webkit-background-clip: text;
          background-image:linear-gradient(to bottom, #c779d0, #4bc0c8);
          backface-visibility:hidden;
          background-position:50% calc((var(--char-index) - 1) * 13rem);
          animation:spin 4s ease-in-out infinite;
          animation-delay:calc((var(--word-index)/3) * -1s);
        }
      }
    }
    span.word{
      position:absolute;
      width:0;
      height:0;
      left:calc(50% + 20rem);
      top:0;
      transform-origin:-20rem 50%;
      transform:rotate(calc(360deg/var(--char-total) * var(--word-index))) scale(-1);
      animation:origin 4s ease-in-out infinite alternate;
      @keyframes origin{
        to{
          left:calc(50% + 15rem);
          transform-origin:-15rem 50%;
        }
      }
      span{
        position:absolute;
        width:5rem;
        height:13rem;
        left:calc(50% - 2.5rem);
        top:calc(50% - 6.5rem);
        font-size:4.5rem;
        display:flex;
        transform-origin:50% 50% -2.5rem;
        justify-content:center;
        align-items:center;
        animation:spin 4s ease-in-out infinite;
        animation-delay:calc((var(--word-index)/3) * -1s);
        @keyframes spin{ 
          100%{
            transform:rotateY(360deg);
          }
        }
        &:before, &:after{
          content:attr(data-char);
          position:absolute;
          width:inherit;
          height:inherit;
          display:flex;
          justify-content:center;
          align-items:center;
          left:100%;
          backface-visibility:hidden;
          -webkit-text-fill-color: transparent;
          -webkit-background-clip: text;
          background-image:linear-gradient(to bottom, #c779d0, #4bc0c8);
        }
        &:before{
          transform-origin:left;
          transform:rotateY(120deg);
        }
        &:after{
          left:auto;
          right:100%;
          transform-origin:right;
          transform:rotateY(-120deg);
        }
      }
    }
  }
}
View Compiled
Splitting();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/splitting@1.0.5/dist/splitting.min.js