3D Dynamic Pure HTML and CSS Text

Written by @kerixa 28 March 2021

In the following code, we have a special and three-dimensional style for the text that can be used to display the heading of websites or their original names. In this code, in addition to the special 3D color of the text in blue and white, the written phrase constantly moves left and right, and up and down. This effect will attract the attention to your website much more.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Pacifico&text=HTML");
@import url("https://fonts.googleapis.com/css?family=Roboto:700&text=Best");
@import url("https://fonts.googleapis.com/css?family=Kaushan+Script&text=Codes");

body {
    min-height: 450px;
    height: 100vh;
    margin: 0;
    background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);
}

.stage {
    height: 300px;
    width: 380px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    perspective: 9999px;
    transform-style: preserve-3d;
}

.layer {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s;
    animation-fill-mode: forwards;
    transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}

.layer:after {
    font: 150px/0.65 "Pacifico", "Kaushan Script", Futura, "Roboto", "Trebuchet MS", Helvetica, sans-serif;
    content: "Pure\a    css!";
    white-space: pre;
    text-align: center;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50px;
    color: whitesmoke;
    letter-spacing: -2px;
    text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}

.layer:nth-child(1):after {
    transform: translateZ(0px);
}

.layer:nth-child(2):after {
    transform: translateZ(-1.5px);
}

.layer:nth-child(3):after {
    transform: translateZ(-3px);
}

.layer:nth-child(4):after {
    transform: translateZ(-4.5px);
}

.layer:nth-child(5):after {
    transform: translateZ(-6px);
}

.layer:nth-child(6):after {
    transform: translateZ(-7.5px);
}

.layer:nth-child(7):after {
    transform: translateZ(-9px);
}

.layer:nth-child(8):after {
    transform: translateZ(-10.5px);
}

.layer:nth-child(9):after {
    transform: translateZ(-12px);
}

.layer:nth-child(10):after {
    transform: translateZ(-13.5px);
}

.layer:nth-child(11):after {
    transform: translateZ(-15px);
}

.layer:nth-child(12):after {
    transform: translateZ(-16.5px);
}

.layer:nth-child(13):after {
    transform: translateZ(-18px);
}

.layer:nth-child(14):after {
    transform: translateZ(-19.5px);
}

.layer:nth-child(15):after {
    transform: translateZ(-21px);
}

.layer:nth-child(16):after {
    transform: translateZ(-22.5px);
}

.layer:nth-child(17):after {
    transform: translateZ(-24px);
}

.layer:nth-child(18):after {
    transform: translateZ(-25.5px);
}

.layer:nth-child(19):after {
    transform: translateZ(-27px);
}

.layer:nth-child(20):after {
    transform: translateZ(-28.5px);
}

.layer:nth-child(n+10):after {
    -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}

.layer:nth-child(n+11):after {
    -webkit-text-stroke: 15px dodgerblue;
    text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}

.layer:nth-child(n+12):after {
    -webkit-text-stroke: 15px #0077ea;
}

.layer:last-child:after {
    -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}

.layer:first-child:after {
    color: #fff;
    text-shadow: none;
}

@keyframes ಠ_ಠ {
100% {
    transform: rotateY(-40deg) rotateX(-43deg);
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="stage">
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
</div><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300