It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 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.
<!-- this script is provided by http://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='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!