3d Text effect using only css3

This animated text effects developed using css and html. 3d effects and animations are achieved using SCSS variables. This zig zag 3d text effects will start the animation in different durations.

The code is developed by Zed Dash and developed using HTML (Pug) and CSS (SCSS). Created OCTOBER 31, 2019 // Updated NOVEMBER 01, 2019.

You might also like

CSS in CSS with a lot of C and S

October 12, 2020

0

Box Shadow Patterns

October 1, 2020

0

Find the demo and code below.

See the Pen 2000 Followers🥳 3D CSS text by Zed Dash (@z-) on CodePen.

HTML (Pug)

- var density = 12 //Be sure to change $depth on line 1 in the CSS - smaller number gives better performance but worse corners
- var text = "2000" //Change to whatever, but it may not fit - change $size on line 2 in the CSS to make it fit
div.text
	for val in text
		div #{val}
			for _ in Array(density)
				div #{val}

CSS (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/c4d472ce3c61feec6376
$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);
		}
	}
}