40+ CSS 3D Text Effect
CSS 3D Text Effect – Are you looking for CSS 3D Text Effect, If yes then in this post I am going to share hand-picked CSS 3D Text Effect for you. CSS3 with all of itโs possibilities, is a revolution in web development. The new CSS3 properties gives web designers a wonderful opportunity to enhance their designs in a way thatโs quick and easy, yet visually impressive, Now making 3D effect using new CSS3 properties is very easy you don’t need to create 3d font image via photoshop just use following CSS 3D Text Effect in your next web based projects purely made in CSS3 and jQuery
CSS 3D Text Effect
Following are the list of CSS 3D Text Effect.
Scss 3D Text Mixin – DEMO
A 3D text mixin to save time, added letting.js to this example – By hugo
3D Text – DEMO
A SCSS mixin to generate realistic 3D text – By joeyhoer
3D Text in Sass – DEMO
3D text effect using CSS3 text-shadow made easier to maintain with @for directive in Sass. Inspired by @mdo. – By bookcasey
Experimental CSS 3D Text animation – DEMO
Inspired by Markdoto 3D Text (http://jqueryplugin.net/), added some css3 animations and keyframes. Enjoy ๐ – By aakashdoshi
Gradient “3D” text – DEMO
please favorite and comment ๐ – By Make
3D Text Effect + Ambient light – DEMO
I wanted to create 2 different 3D Text effects. One with light that comes from a human made source and one from a non-human source. – By joepk
3D effect with shadows – DEMO
Two different approaches to creating editable 3D text – By zastrow
Glowing 3D Text – DEMO
– By bennettfeely
Mouse tracking 3D text with light source – DEMO
3d text that tracks perspective based on mouse coordinates. Simulated light source movement. – By jeremyr
3D Text Lighting & Shadows – DEMO
I woke up and decided to redo one of these old photoshop logo design tutorials in pure CSS. https://s3.amazonaws.com/psdtuts/24_Sunlight/final.jpg – By jeromevanoverbeke
Rainbow 3D Text – DEMO
Using SCSS mixins and for statements created this rainbow animated text – By hugo
3D Text – DEMO
This is a pen created to try a 3d effect with box-shadow only – By pedrohenriquepires
Ambient Occlusion 3D text mixin – DEMO
Generates a 3d text effect that can darken as it approaches the background, giving the appearance of ambient occlusion, a 3d rendering technique that darkens areas where geometry meets. – By elifitch
3D Gradient Text – DEMO
extended on my 3d text mixin by adding a gradient to the text – By hugo
SCSS Mixin For 3D Text – DEMO
Forked and convertet to SCSS 3D text mixin. Multi-Level text-shadow mixin for making your big, fat headline text look 3D. – By Qbit42
Shadow Parallax – DEMO
3D text and box shadow parallax effect based on the 3D Inset Effect (http://cdpn.io/tDaCn). – By joshbader
Animation 3D Text Cube – DEMO
Brings together a few “Cubes” to become a “3D Text” by using only CSS. – By uzcho_
Simple Inspiration w/ 3D Text – DEMO
Simple Inspiration w/ 3D Text-Shadow Secret – By internetgho5t
3D text effect – DEMO
– By ginirsss
3d Text using Text-Shadow – DEMO
– By designcouch
3D CSS Text – DEMO
Selectable 3D text in CSS. – By ejsado
3D text using CSS3 – DEMO
http://blog.thelittletechie.com/2015/03/3d-text-using-css3.html – By vivinantony
3D text – DEMO
Testing the Google Fonts 3D text ‘thingy’ – By chriseisenbraun
3D Text! – DEMO
So I got a Kinder Surprise in the airport. The toy? 3d glasses!!! The “scene” that it came with didn’t work so I made this. – By rileyjshaw
3D text effect – DEMO
– By brian-guerrero
JS 3D Text – DEMO
3D Text with js. – By paulcs
3D Text – DEMO
Don’t forget to hover! Basically just to try out SASS. I feel like there should be a less ugly way to do this, but I can’t see it right now. – By birjolaxew
3d Text Rotator – DEMO
– By paulwood
3D Text – DEMO
– By jacobswift
Onion 3D text – DEMO
– By supah
Bottom view – DEMO
CSS 3D Text Effect with lighting and shadow (bottom view) – By nokiss
Red Cyan 3D Text hover – DEMO
Just a little experiment – By dweinhardt
3D text with CSS 3D transform – DEMO
A rotating 3d text with 3d CSS transforms (no text-shadow) – By BitOfGold
3D text – DEMO
– By Sahebt_Alezar
3D Text Effect – DEMO
– By rolopen85
3D Text with ambient occlusion – DEMO
Quick hack to test performance of filter: blur on css 3d transforms. It turned out into a solid text with ambient occlusion. – By spite
#codevember_01 – DEMO
Kicking off #codevember right with some 3d text – By johnbgarcia
3D Text Mixin – DEMO
Inspiration: http://stackoverflow.com/a/28514472/814031 – By localhorst
Super Discount – DEMO
Another 3d text-effect using text-shadow and transforms. – By zitrusfrisch
3d Text Animation – DEMO
Quick sessions playing with text shadow and animations. – By willpaige
Ice Cream Sammy! – DEMO
A 3d text effect using what is best described as “torrents of shadows” technique, made possible by SCSS ๐ – By auginator
3D Box Shadow 3D Text Shadow – DEMO
3d Box Shadow 3d text Shadow – By yusufbkr
3D Glitch Text (CSS Only) – DEMO
Trying to recreate a Pen I had seen with nothing but CSS. Thought It’d be cool to have the 3D text colours being used. Let your curser disappear in the trip. With “epilepsy” mode. – By colinhorn
Word 3D – DEMO
An exaggerated word cloud with 3D text. – By tmrDevelops
404 Animated Page – DEMO
Neat little CSS 3D Text animation – By Gogh
3D text effects – DEMO
http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/ – By digisam
3D Text – DEMO
– By chandrashekhar
A Pen by @TimLamber – DEMO
– By TimLamber
I Hope you liked Hand-picked list of CSS 3D Text Effect, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.