w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Effects

3d Text effect using only css3

W3TWEAKS by W3TWEAKS
November 29, 2019
in Effects
0

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

CSS in CSS with a lot of C and S

October 12, 2020
0
Box Shadow Patterns

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);
		}
	}
}
Tags: 3d text effectstext animationstext effects
Previous Post

Download Button with loader Animation

Next Post

Realistic 3D Photo Card Gallery

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

CSS in CSS with a lot of C and S

CSS in CSS with a lot of C and S

by W3TWEAKS
October 12, 2020
0
0

Giulia Cardieri crafts a cascade of Cs and Ss with SCSS. Phew! See the Pen CSS in CSS with a...

Box Shadow Patterns

Box Shadow Patterns

by W3TWEAKS
October 1, 2020
0
0

Manan Tank shares a selection of fun patterns: "Each pattern is created using a single div, each square or circle...

Masked & Skewed

Masked & Skewed

by W3TWEAKS
September 30, 2020
0
0

Playing with artificial perspective and clipping-masked image and text, inspired by a vintage travel poster and a very stubborn Collie...

Fit Text with CSS Variables

Fit Text with CSS Variables

by W3TWEAKS
September 29, 2020
0
0

Fit text to the viewport with CSS variables! All you need is to know the number of characters, which a...

Next Post
Realistic 3D Photo Card Gallery

Realistic 3D Photo Card Gallery

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube