<div id="header-plugin"></div>
<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.5/angular.min.js"></script>
<body ng-app ng-controller="MainController">
<div class="input-box">
<span>Type in your name</span><br>
<input type="text" ng-model="name" />
</div>
<div class="container">
<span class="render">{{name}}</span><br>
<span class="render reflect">{{name}}</span>
</div>
</body>
body {
justify-content: center;
}
.input-box {
text-align: center;
margin: 0 0 100px 0;
z-index: 2;
color: white
}
.input-box input {
width: 200px;
padding: 5px;
border-radius: 35px;
border: 1px solid black;
font-size: 20px
}
.container {
text-align: center;
}
.render {
white-space: nowrap;
display: inline-block;
z-index: 0;
position: relative;
line-height: 0.55em;
height: 0.7em;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-transform: rotateY(30deg);
-webkit-transform: rotateY(30deg);
transform: rotateY(30deg);
font-family: 'Bree Serif', serif;
font-size: 12em;
color: #f5f5f5;
text-shadow: white 0.006em 0.006em 1px, rgba(0, 0, 0, 0.15) -3px 7px 10px, #d0d0d0 -1px 1px 1px, #d0d0d0 -2px 1px 1px, #d0d0d0 -3px 1px 1px, #d0d0d0 -4px 1px 1px, #d0d0d0 -5px 1px 1px, #d0d0d0 -6px 1px 1px, #d0d0d0 -7px 1px 1px, #d0d0d0 -8px 1px 1px, #d0d0d0 -9px 1px 1px, #d0d0d0 -10px 1px 1px, #d0d0d0 -11px 1px 1px, #d0d0d0 -12px 1px 1px, rgba(255, 255, 255, 0.6) -5px 2px 100px;
}
.render.reflect {
z-index: 0;
opacity: 0.4;
-moz-transform: rotateX(180deg) rotateY(-30deg);
-webkit-transform: rotateX(180deg) rotateY(-30deg);
transform: rotateX(180deg) rotateY(-30deg);
}
$( "#header-plugin" ).load( "https://vivinantony.github.io/header-plugin/", function() {
$("a.back-to-link").attr("href", "http://blog.thelittletechie.com/2015/03/3d-text-using-css3.html#tlt")
});
//scripts here
var MainController = function($scope) {
$scope.name = "3D";
};
This Pen doesn't use any external CSS resources.