Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
3D Textbox
.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")
*,
*: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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment