3D Spinning Text

3d-spinning-text.markdown

3D Spinning Text

A Pen by Ryan Marshall on CodePen.

License.

index.haml

.Text
  - 18.times do
    .SpinningText
      .InnerText
      .OuterText

style.scss

$n: 18;
$t: 8s;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  text-align: center;
  perspective: 100vh;
  _perspective-origin:bottom right;
  tranform-origin:100vh;
  font-size:18px;
}

.Text {
  transform-style: preserve-3d;
}

.SpinningText {
  animation: rotate $t linear infinite;
  transform-style:preserve-3d;
  margin-bottom:2px;
}


.SpinningText::before, .InnerText::before, .InnerText::after, .OuterText::before, .OuterText::after, .SpinningText::after {
     content:'sevensoft 7';
     position:absolute;
     top:0;
     left:0;
     right:0;
     transform-style: preserve-3d;
     text-shadow:1px 1px 1px rgba(0,0,0,.1), 1px -1px 1px rgba(0,0,0,.1), -1px 1px 1px rgba(0,0,0,.7), -1px -1px 1px rgba(0,0,0,.1),1px 1px 1px rgba(0,0,0,1), 1px -1px 1px rgba(0,0,0,1), -1px 1px 1px rgba(0,0,0,1), -1px -1px 1px rgba(0,0,0,1);
     color:lightgrey;
}
.SpinningText::before {
    position:relative;
    transform:translateZ(200px);
    _color:darkblue;
}
.InnerText::before {
    transform:translateZ(201px);
}
.OuterText::before {
     transform:translateZ(203px);
}
.OuterText::after {
     transform:translateZ(105px);
}
.InnerText::after {
     transform:translateZ(107px);          
     color:rgb(210,230,255);
}
.SpinningText::after {
    transform:translateZ(2px);
    color:white;
}

@for $i from 2 through $n {
  .SpinningText:nth-child(#{$i}) {
    animation-duration: $t / $i;
    _transform-style: preserve-3d;  
    position:relative;
  }
}

@keyframes rotate {
  to { transform: rotateY(360deg) }
}