JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<h1 id=letCreate3d>Introducing the first css 3D text generator</h1>
<input type="text" id="textName"/>

<figure id=figure3d></figure>
<div id=matrixVal></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Concert+One);
span{
   display:none;
}
#figure3d span {
color:silver;
    -webkit-text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6);
    -moz-text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6);
    -ms-text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6);
     text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6);

  
}
#figure3d div:first-child span{
    color:#333; 
}
#figure3d div:last-child span{
    color:#ccc;
}
@media all and (-webkit-transform-3d) {
 
}

@media screen and (max-width: 640px) {

}
@media only screen and (max-width: 1024px) {

}
@media screen and (min-width: 1025px) {
 
}

* { -webkit-box-sizing:border-box; }

body {
  background: rgba(10, 10, 10, 0.13);
  overflow:hidden;
  text-align:center;
}

figure#figure3d {
  -webkit-transform: rotateX(54deg) scale(1) skew(10deg) translate3d(0px, 0px, 0px);
  -webkit-transform-origin:center center;
  -webkit-transform-style:preserve-3d;
}



#figure3d div {
  display:block;
  width: 600px;
  height: 320px;
  padding:40px;
  line-height:1.5;
  font:900 4em 'Concert One', sans-serif;
  text-transform:uppercase;
  position:absolute;
  color:#0a0a0a;
    /*
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
    */
}

JavaScript

var abst = '1',
    layer= "40";
$("#letCreate3d").click(function(){
    if($("#textName").val() == ''){
        $("#textName").val('3D TEXT');
        creat3d();
    }else{
        creat3d();  
    } 
  });

$("#letCreate3d").click();

var transitionEnd = {
  'WebkitTransition' : 'webkitTransitionEnd'
  ,  'MozTransition'    : 'transitionend'
  ,  'msTransition'     : 'transitionend'
  ,  'transition'       : 'transitionend'
}

$(".overlay").on(transitionEnd, function() {
    $(this).hide();
    // OR REMOVE it
    // $(this).remove();
});

// START to Create 3D Text
function creat3d(){
    $("#figure3d").empty();
var logo = $("#textName").val();
for(i = 0;i < layer;i++){
    $("#figure3d").append(" <div class=content3d><h1>"+logo+"</h1></div>");
    }

$( "#figure3d .content3d" ).each(function( index ) {
    $(this).css({
                    '-webkit-transform': 'translateZ(-'+index*abst+'px)',
                    '-moz-transform': 'translateZ(-'+index*abst+'px)',
                    '-ms-transform': 'translateZ(-'+index*abst+'px)',
                    'transform': 'translateZ(-'+index*abst+'px)'
                });
});
$('#figure3d h1').each(function(letter){

var array = $(this).text().split('');

$.each(array, function( i ) {
    array[i] = '<span>' + array[i] + '</span>';
});

$(this).html(array.join(''));
});
   
$("#figure3d span").each(function(index) {
    $(this).delay(10*index).fadeIn(800);
}); 
animate3d();
}
function animate3d(){
    var xKey = 88, yKey = 89, zKey = 90,
        leftKey = 37, downKey = 40, upKey = 38, rightKey = 39; 
		degX = 0;
        degY = 0;
        degZ = 0;  
        scale= 1;
		$(document).keydown(function(key){
			if (key.keyCode == leftKey && key.ctrlKey) {
				
				degY -= 1;
                matrix();
			} else if (key.keyCode == rightKey && key.ctrlKey) {
				
				degY += 1;
                matrix();
			} else if (key.keyCode == upKey && key.ctrlKey) {
				
				degX += 1;
                matrix();
			} else if...