Wobble

index.html

<!-- https://angulargeometry.tumblr.com/post/173654378690/mint-interior-gif-daily-c4d -->
<div class="container">

  <div class="cube" style="--width: 8;">
    <div class="side top"></div>
    <div class="side back"></div>
    <div class="side right"></div>
  </div>

  <div class="cube wobble" style="--width: 6;">
    <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 wobble" style="--width: 4;">
    <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 wobble" style="--width: 2; --height: 0.5">
    <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>

script.js

CSS.registerProperty({
	'name': '--z', 
	'syntax': '<number>', 
	'initialValue': 1
});

scripts

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

style.scss

$color: #9A9AA2;
$highlight: #43FD96;
$alt: darken($color, 20%);


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

html, body { background: $color; }

.container {
  transform-style: preserve-3d;
  transform: rotateX(-35deg) rotateY(45deg);
}


.cube {
  --width: 1;
  --height: 0.5;
  font-size: 10vw; //calc( 1em * var(--size));
  width: calc(1em * var(--width));
  height: calc(1em * var(--height));
  position: relative;
  transform-style: preserve-3d;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--i);
  visibility: hidden;
  background: $color;

  @for $i from 1 through 4 {
    &:nth-child(#{$i}){ --i: #{$i - 1}; }
  }
}

.cube.wobble {
  animation: cube-wobble 2s cubic-bezier(.5,0,.5,1) infinite;
  animation-delay: calc( -4s + (var(--i) * 0.5s) );
  @keyframes cube-wobble {
    0%, 100% { 
      transform: 
        translateY( calc(-0.5em * var(--z) * var(--i) ) )
        translate(-50%,-50%)
        rotateZ( calc( 4deg + (2deg * var(--i)) ) ); 
      background-color: darken($color, 3%);
    }
    50% { 
      transform: 
        translateY( calc(-0.5em * var(--z) * var(--i) ) )
        translate(-50%,-50%)
        rotateZ( calc( -4deg - (2deg * var(--i)) ) );
      background-color: lighten($color, 3%);
    }
  }
  
  transition: --z 0.7s cubic-bezier(.52,-0.01,.35,.86);
  
  --z: 0;
  
  .container:hover & {
    --z: 1; //calc( var(--i) * 5 );
    // animation-duration: 0.5s; 
    //animation-delay: calc( -0.5s + (var(--i) * 0.1s) );
    // .side { opacity: 0.8; }
  }
}

.side {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0; 
  bottom: 0;
  right: 0;
  margin: auto;
  width: calc(1em * var(--width));
  height: calc(1em * var(--height));
  transform-style: preserve-3d;
  background: $highlight;
  transition: opacity 0.5s linear;
}

.top,
.bottom {
  width: calc(1em * var(--width));
  height: calc(1em * var(--width));
}

.top {
  $offset: 1em;
  clip-path: polygon(0% 0%, 0% 100%, $offset 100%, $offset $offset, calc(100% - #{$offset}) $offset, calc(100% - #{$offset}) calc(100% - #{$offset}), $offset calc(100% - #{$offset}), $offset 100%, 100% 100%, 100% 0%);
}


.right, 
.back { 
  width: calc((1em * var(--width)) - 2em );
}

.top { background: inherit; }
.bottom { background: $color; }
.front { background: $alt; }
.back { background: #2EAA67; }
.right { background: $highlight; }

.front {    transform: rotateY(0deg) 
  translateZ(calc( 0.5em * var(--width) )); }
.back {     transform: rotateY(180deg) 
  translateZ(calc( -1em + 0.5em * var(--width) )); }
.right {    transform: rotateY(90deg) 
  translateZ(calc( -1em + 0.5em * var(--width) )); }
.left {     transform: rotateY(-90deg) 
  translateZ(calc( 0.5em * var(--width) )); }
.top {      transform: rotateX(90deg) 
  translateZ(calc( 0.5em * var(--height) )); }
.bottom {   transform: rotateX(-90deg)
  translateZ(calc( 0.5em * var(--height) )); }

wobble.markdown

Wobble

CSS-only recreation of https://angulargeometry.tumblr.com/post/173654378690/mint-interior-gif-daily-c4d

Added a hover state for browsers that support

A Pen by Shaw on CodePen.

License.