Html Code: HTML 3D Input Text Box

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.
<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<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;font-family:Tahoma">HTML Best Codes</a>
If you don't know how to use this code or need more information Click here!
Compatible browsers:
Html Best Codes

Html Code: HTML 3D Input Text Box

Links
