March 20, 2015

3D text using CSS3

3D text using CSS3

This is done using text-shadow property in CSS3 for 3D effect and transform property in CSS3 to rotate the text to some angle. I have used angular.js here, so that the user can type in their name or text to see the effect taking place.

I have added a reflection to it and used transform property and inverted the text. To give a reflection efect i have reduced the opacity of the text.

Click the Demo button below and type in your text and see the 3D text.


<body ng-app ng-controller="MainController">
  <div class="input-box">
    <span>Type in your name</span><br>
    <input type="text" ng-model="name" />

  <div class="container">
    <span class="render">{{name}}</span><br>
    <span class="render reflect">{{name}}</span>


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: none;
  font-size: 20px

.container {
  text-align: center;

.render {
  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);


var MainController = function($scope) {
   $ = "3D";  


I have used external attachments.

<link href='' rel='stylesheet' type='text/css'>
<script src=""></script>

No comments:

Post a Comment

Popular Posts