3D Textbox

3d-textbox.markdown

3D Textbox

Created this 3D textbox form input box as part of the article image for https://rgb.wiki/textbox

It uses transform: rotate for the sides and for the overall rotation.

A Pen by Jouan Marcel on CodePen.

License.

DEMO: https://codemyui.com/3d-angled-text-box-with-submit-button/

index.pug

.textbox
  .textbox-box
    .textbox-face.textbox-side
    .textbox-face.textbox-bottom
    .textbox-face.textbox-top
    .textbox-field
      .textbox-label Article Title
      input(type="text" placeholder="Type here...").textbox-text
    .textbox-action
      .textbox-face.textbox-side
      .textbox-face.textbox-top
      .textbox-face.textbox-bottom
      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")
        
a(href="https://rgb.wiki/textbox" target="_blank").reference
  img(src="https://rgb.wiki/favicon.png")

style.sass

*,
*: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
  animation: turnaround 20s infinite
  &-box
    background-color: #e3f6f5
    display: flex
    align-items: center
    justify-content: center
    box-shadow: inset 0 0 0 3px #272343
    position: relative
    animation: hover 2s alternate infinite
    height: 100%
    transform-style: preserve-3d
    transition: all .2s ease
  &-field
      display: flex
      flex-direction: column
      padding: 10px 15px 15px
      align-self: stretch
      border-radius: 5px
  &-label
    transform: translateZ(20px)
    text-transform: uppercase
    font-weight: bold
    animation: hover 2s -.2s alternate infinite
    color: #272343
    -webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, .5))
  &-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
    animation: hover 2s -.4s alternate infinite
    background-color: #bae8e8
    position: relative
    transition: all .2s ease
    svg
      fill: #272343
      width: 65%
      height: 65%
      animation: hover 2s -.6s alternate infinite
      -webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, .5))
    .textbox-face
      background-color: #66a8a8
      transition: all .2s ease
    .textbox-side
      width: 10px
    .textbox-bottom,
    .textbox-top
      height: 10px
    &:hover
      cursor: pointer
      background-color: #9ccece
      .textbox-face
        background-color: #468282
      
      
  &-text
    width: 100%
    height: 100%
    border: none
    background-color: transparent
    font: 2.5rem sans-serif
    animation: hover 2s -.4s alternate infinite
    display: block
    color: #272343
    -webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, .5))
    &::placeholder
      color: #272343
      opacity: .5
    &:focus
      outline: none

  &-face
    position: absolute
    background-color: #272343
    left: 0
  &-side
    transform: rotateY(90deg)
    height: 100%
    width: 20px
    top: 0
    transform-origin: 0% 50%
  &-bottom
    transform: rotateX(90deg)
    height: 20px
    width: 100%
    bottom: 0
    transform-origin: 50% 100%
  &-top
    transform: rotateX(-90deg)
    height: 20px
    width: 100%
    top: 0
    transform-origin: 50% 0
    
    
    
@keyframes hover
  from
    transform: translateZ(10px)
  to
    transform: translateZ(20px)
    
@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
  img
    width: 35px
    height: 35px