HTML 3D Input Text Box

Written by @kerixa 3 April 2021

An input text box is usually used to get data from users. In the following code, we have an input text box with the difference that instead of a simple box, a three-dimensional box moves and rotates from and to the right and left. The rotation of this text box can attract the audience's attention. This code is useful for entering data such as a search term.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-image: radial-gradient(circle, #fff 30%, #ccc);
    overflow: hidden;
    font-family: sans-serif;
}

.textbox {
    width: 500px;
    height: 110px;
    position: relative;
    transform-style: preserve-3d;
    -webkit-animation: turnaround 20s infinite;
    animation: turnaround 20s infinite;
}

.textbox-box {
    background-color: #e3f6f5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 3px #272343;
    position: relative;
    -webkit-animation: hover 2s alternate infinite;
    animation: hover 2s alternate infinite;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.2s ease;
}

.textbox-field {
    display: flex;
    flex-direction: column;
    padding: 10px 15px 15px;
    align-self: stretch;
    border-radius: 5px;
}

.textbox-label {
    transform: translateZ(20px);
    text-transform: uppercase;
    font-weight: bold;
    -webkit-animation: hover 2s -0.2s alternate infinite;
    animation: hover 2s -0.2s alternate infinite;
    color: #272343;
    -webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
}

.textbox-action {
    height: 80px;
    width: 80px;
    min-width: 80px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    -border-radius: 100px;
    transform-style: preserve-3d;
    -webkit-animation: hover 2s -0.4s alternate infinite;
    animation: hover 2s -0.4s alternate infinite;
    background-color: #bae8e8;
    position: relative;
    transition: all 0.2s ease;
}

.textbox-action svg {
    fill: #272343;
    width: 65%;
    height: 65%;
    -webkit-animation: hover 2s -0.6s alternate infinite;
    animation: hover 2s -0.6s alternate infinite;
    -webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
}

.textbox-action .textbox-face {
    background-color: #66a8a8;
    transition: all 0.2s ease;
}

.textbox-action .textbox-side {
    width: 10px;
}

.textbox-action .textbox-bottom,
.textbox-action .textbox-top {
    height: 10px;
}

.textbox-action:hover {
    cursor: pointer;
    background-color: #9ccece;
}

.textbox-action:hover .textbox-face {
    background-color: #468282;
}

.textbox-text {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    font: 2.5rem sans-serif;
    -webkit-animation: hover 2s -0.4s alternate infinite;
    animation: hover 2s -0.4s alternate infinite;
    display: block;
    color: #272343;
    -webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
}

.textbox-text::-moz-placeholder {
    color: #272343;
    opacity: 0.5;
}

.textbox-text:-ms-input-placeholder {
    color: #272343;
    opacity: 0.5;
}

.textbox-text::placeholder {
    color: #272343;
    opacity: 0.5;
}

.textbox-text:focus {
    outline: none;
}

.textbox-face {
    position: absolute;
    background-color: #272343;
    left: 0;
}

.textbox-side {
    transform: rotateY(90deg);
    height: 100%;
    width: 20px;
    top: 0;
    transform-origin: 0% 50%;
}

.textbox-bottom {
    transform: rotateX(90deg);
    height: 20px;
    width: 100%;
    bottom: 0;
    transform-origin: 50% 100%;
}

.textbox-top {
    transform: rotateX(-90deg);
    height: 20px;
    width: 100%;
    top: 0;
    transform-origin: 50% 0;
}

@-webkit-keyframes hover {
from {
    transform: translateZ(10px);
}

to {
    transform: translateZ(20px);
}
}

@keyframes hover {
from {
    transform: translateZ(10px);
}

to {
    transform: translateZ(20px);
}
}

@-webkit-keyframes turnaround {
0% {
    transform: perspective(500px) rotateY(70deg) rotateZ(-10deg) rotateX(30deg);
}

33% {
    transform: perspective(500px) rotateY(20deg) rotateZ(-10deg) rotateX(-30deg);
}

67% {
    transform: perspective(0) rotateY(0deg) rotateZ(0deg) rotateX(0deg);
}

100% {
    transform: perspective(500px) rotateY(70deg) rotateZ(-10deg) rotateX(30deg);
}
}

@keyframes turnaround {
0% {
    transform: perspective(500px) rotateY(70deg) rotateZ(-10deg) rotateX(30deg);
}

33% {
    transform: perspective(500px) rotateY(20deg) rotateZ(-10deg) rotateX(-30deg);
}

67% {
    transform: perspective(0) rotateY(0deg) rotateZ(0deg) rotateX(0deg);
}

100% {
    transform: perspective(500px) rotateY(70deg) rotateZ(-10deg) rotateX(30deg);
}
}

.reference {
    position: absolute;
    right: 20px;
    bottom: 15px;
}

.reference img {
    width: 35px;
    height: 35px;
}
</style>
<div class="textbox">
  <div class="textbox-box">
    <div class="textbox-face textbox-side"></div>
    <div class="textbox-face textbox-bottom"></div>
    <div class="textbox-face textbox-top"></div>
    <div class="textbox-field">
      <div class="textbox-label">Article Title</div>
      <input class="textbox-text" type="text" placeholder="Type here..."/>
    </div>
    <div class="textbox-action">
      <div class="textbox-face textbox-side"></div>
      <div class="textbox-face textbox-top"></div>
      <div class="textbox-face textbox-bottom"></div>
      <svg viewBox="0 0 24 24">
        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
      </svg>
    </div>
  </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