분류 css

3D Textbox

컨텐츠 정보

  • 조회 130 (작성일 )

본문

https://codepen.io/jouanmarcel/pen/Powbrgq 


HTML : 



<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 class="reference" href="https://rgb.wiki/textbox" target="_blank"><img src="https://rgb.wiki/favicon.png"/></a>


CSS : 


*,

*: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;

  -webkit-transform-style: preserve-3d;

          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%;

  -webkit-transform-style: preserve-3d;

          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 {

  -webkit-transform: translateZ(20px);

          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;

  -webkit-transform-style: preserve-3d;

          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::-webkit-input-placeholder {

  color: #272343;

  opacity: 0.5;

}

.textbox-text:-ms-input-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 {

  -webkit-transform: rotateY(90deg);

          transform: rotateY(90deg);

  height: 100%;

  width: 20px;

  top: 0;

  -webkit-transform-origin: 0% 50%;

          transform-origin: 0% 50%;

}

.textbox-bottom {

  -webkit-transform: rotateX(90deg);

          transform: rotateX(90deg);

  height: 20px;

  width: 100%;

  bottom: 0;

  -webkit-transform-origin: 50% 100%;

          transform-origin: 50% 100%;

}

.textbox-top {

  -webkit-transform: rotateX(-90deg);

          transform: rotateX(-90deg);

  height: 20px;

  width: 100%;

  top: 0;

  -webkit-transform-origin: 50% 0;

          transform-origin: 50% 0;

}


@-webkit-keyframes hover {

  from {

    -webkit-transform: translateZ(10px);

            transform: translateZ(10px);

  }

  to {

    -webkit-transform: translateZ(20px);

            transform: translateZ(20px);

  }

}


@keyframes hover {

  from {

    -webkit-transform: translateZ(10px);

            transform: translateZ(10px);

  }

  to {

    -webkit-transform: translateZ(20px);

            transform: translateZ(20px);

  }

}

@-webkit-keyframes turnaround {

  0% {

    -webkit-transform: perspective(500px) rotateY(70deg) rotateZ(-10deg) rotateX(30deg);

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

  }

  33% {

    -webkit-transform: perspective(500px) rotateY(20deg) rotateZ(-10deg) rotateX(-30deg);

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

  }

  67% {

    -webkit-transform: perspective(0) rotateY(0deg) rotateZ(0deg) rotateX(0deg);

            transform: perspective(0) rotateY(0deg) rotateZ(0deg) rotateX(0deg);

  }

  100% {

    -webkit-transform: perspective(500px) rotateY(70deg) rotateZ(-10deg) rotateX(30deg);

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

  }

}

@keyframes turnaround {

  0% {

    -webkit-transform: perspective(500px) rotateY(70deg) rotateZ(-10deg) rotateX(30deg);

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

  }

  33% {

    -webkit-transform: perspective(500px) rotateY(20deg) rotateZ(-10deg) rotateX(-30deg);

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

  }

  67% {

    -webkit-transform: perspective(0) rotateY(0deg) rotateZ(0deg) rotateX(0deg);

            transform: perspective(0) rotateY(0deg) rotateZ(0deg) rotateX(0deg);

  }

  100% {

    -webkit-transform: perspective(500px) rotateY(70deg) rotateZ(-10deg) rotateX(30deg);

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

  }

}

.reference {

  position: absolute;

  right: 20px;

  bottom: 15px;

}

.reference img {

  width: 35px;

  height: 35px;

}