Cube Consumer

cube-consumer.markdown

Cube Consumer

CSS 3D animation inspired by http://pislices.ca/post/173545303214/box-180503

A Pen by Shaw on CodePen.

License.

index.html

<!-- 

Inspired by http://pislices.ca/post/173545303214/box-180503 

-->
<div class="cube-container">

  <div class="cube consumed">
    <div class="side top"></div>
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side bottom"></div>
  </div>

  <div class="cube consumer">
    <div class="side top"></div>
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side bottom"></div>
  </div>

</div>

scripts

<script src="https://codepen.io/shshaw/pen/epmrgO"></script>

style.scss

html, body { background: #000; color: #FFF; }

$duration: 1s;
$ease: cubic-bezier(.66,.03,.39,1);
$ease: cubic-bezier(.41,.02,.8,.86);
$ease: cubic-bezier(.52,.08,.28,.94);

html { height: 100%; display: flex; }
body { margin: auto; }

.cube-container {
  font-size: 20vw;
  transform-style: preserve-3d;
  transform: rotateX(-35deg) rotateY(45deg);
  
  animation: spin $duration * 2 steps(1) infinite;//cubic-bezier(.84,.02,.02,.97) infinite;
  @keyframes spin {
    0%, 100% {
      transform: rotateX(-35deg) rotateY(45deg);
    }
    50% { 
      transform: rotateX(-35deg) rotateY(-45deg);
    }
  }

}

.cube {
  margin: auto;
  width: 1em;
  height: 1em;
  position: relative;
  transform-style: preserve-3d;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.side {
  position: absolute;
  top: 0;
  left: 0; 
  width: 100%;
  height: 100%;
  border: solid 2px;
  box-sizing: border-box;
  background: #000;
  transform-style: preserve-3d;
}

.front {    transform: rotateY(0deg) translateZ(0.5em); }
.back {     transform: rotateY(180deg) translateZ(0.5em); }
.right {    transform: rotateY(90deg) translateZ(0.5em); }
.left {     transform: rotateY(-90deg) translateZ(0.5em); }
.top {      transform: rotateX(90deg) translateZ(0.5em); }
.bottom {   transform: rotateX(-90deg) translateZ(0.5em); }


.consumed {
  font-size: 2em;
  animation: scale-down $duration $ease infinite; 
  // animation-timing-function: cubic-bezier(.71,0,.76,.82);
  //animation-timing-function: cubic-bezier(0.37, 0.24, 0.59, 0.57);
  @keyframes scale-down {
    90%,100% { transform: scale3d(0.5, 0.5, 0.5); } 
  }
}

.consumer {
  position: relative;
  font-size: 2em;
  z-index: 2;

  animation: consume-in $duration $ease infinite;
  @keyframes consume-in {
    0% { transform: translateZ(-3em); } 
    90% { transform: translateZ(0em); }
  }

  .front {
    transform: rotateY(0deg) translateZ(0.5em) rotateX(0deg);
    transform-origin: top center;

    animation: consume-flap $duration $ease infinite;
    @keyframes consume-flap {
      0%, 10% { 
        transform: rotateY(0deg) translateZ(0.5em) rotateX(280deg);
      }
      
      90% { transform: rotateY(0deg) translateZ(0.5em) rotateX(0deg); }
    }
  }
}