Make 3D text effect with animation using SCSS

3D text help to make you normal text to 3D animated text with fancy effect which you can use to highlight text with some awesome effect.
Make 3D text effect with animation using SCSS

HTML

 
<div class="text">
  <div>2
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
  </div>
  <div>0
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
  </div>
  <div>0
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
  </div>
  <div>0
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>0</div>
  </div>
</div>


SCSS

$density:12;
$size: 35vmin;
body {
    display: grid;
    place-items: center;
    height: 100vh;
    background: #323133;
    font-family: "Quicksand", sans-serif;
    font-weight:700;
    perspective: 60rem;
    perspective-origin: 50% 50%;
    overflow: hidden;
    #user-button {
        --user-button-background: #434A54;
        --user-button-text:white;
    }
    .text {
        user-select: none;
        > div {
            display: inline-block;
            position: relative;
            font-size: $size;
            color:transparent;
            transform-origin: center center;
            transform-style: preserve-3d;
            animation: float 4s infinite;
            @for $i from 1 through 4 {
                &:nth-child(#{$i}) {
                    animation-delay: (-$i + 4)*-0.5s;
                }
            }
            > div {
                position: absolute;
                top:0;
                left:0;
                color: white;
                text-shadow:0 0 1px white; 
                $thickness:3; 

                &:not(:nth-child(n+#{$thickness})), &:not(:nth-last-child(n+#{$thickness}))
                {
                    color: #ed5565;
                    text-shadow:0 0 1px #ed5565;
                }
                @for $i from 1 through $density {
                    &:nth-child(#{$i}) {
                        transform: translateZ(($i - ($density/2)) * ($size / ($density * 5)));
                    }
                }
            }
        }
    }
}
 

$pi: 3.14159265359;
$_precision: 10;
 
@function pow($base, $exp) {
  $value: $base;
  @if $exp > 1 {
    @for $i from 2 through $exp {
      $value: $value * $base;
    }
  }
  @if $exp < 1{
    @for $i from 0 through -$exp {
      $value: $value / $base;
    }
  }
  @return $value;
}
 
@function fact($num) {
  $fact: 1;
  @if $num > 0{
    @for $i from 1 through $num {
      $fact: $fact * $i;
    }
  }
  @return $fact;
}
 
@function sin($a){
  $sin: $a;
  @for $n from 1 through $_precision {
    $sin: $sin + (pow(-1, $n) / fact(2 * $n + 1) ) * pow($a, (2 * $n + 1));
  }
  @return $sin;
}
 
@function cos($a){
  $cos: 1;
  @for $n from 1 through $_precision {
    $cos: $cos + ( pow(-1,$n) / fact(2*$n) ) * pow($a,2*$n);
  }
  @return $cos;
}
 
@keyframes float {
    @for $i from 0 through 100 {
        #{$i*1%} {
            transform: rotate3d(sin($i*$pi/50), cos($i*$pi/50), 0, 30deg);
        }
    }
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by z-. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.