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; //Fill in gaps a little
                $thickness:3; //Thickness of ends
                //&:last-child, &:first-child //Just does first and last
                &: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)));
                    }
                }
            }
        }
    }
}
 
//Modified, original from https://gist.github.com/kamikat/c4d472ce3c61feec6376See live demo and download source code.
$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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.