<h1>CSS MotionBlur</h1>

<section class="container">
  <div id="cube">
    <figure class="front"></figure>
    <figure class="back"></figure>
    <figure class="right"></figure>
    <figure class="left"></figure>
    <figure class="top"></figure>
    <figure class="bottom"></figure>
  </div>
</section>

<button type="button">Spin</button>
@import url(https://fonts.googleapis.com/css?family=Exo+2:200,200italic,600,600italic);

* {
  outline: none;
  -webkit-box-sizing: border-box;
}

body {
  font: 100%/2em 'Exo 2', sans-serif;
  background: #333;
}

h1 {
  color: #eee;
  text-align: center;
  font-weight: normal;
}

button {
  display: block;
  padding: 0 40px;
  margin: 60px auto;
  font: 100%/2em 'Exo 2', sans-serif;
  text-transform: uppercase;
  background: #ddd;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  perspective: 1000px;
}

#cube {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 250ms;
  transform: rotateX(0) translateX(-40px);
}

#cube figure {
  position: absolute;
  display: block;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.3);
  border: 2px solid #fff;
}

#cube .front { transform: rotateY(0deg) translateZ(100px); }
#cube .back { transform: rotateX(180deg) translateZ(100px); }
#cube .right { transform: rotateY(90deg) translateZ(100px); }
#cube .left { transform: rotateY(-90deg) translateZ(100px); }
#cube .top { transform: rotateX(90deg) translateZ(100px); }
#cube .bottom { transform: rotateX(-90deg) translateZ(100px); }

.blur { animation: blur 250ms; }

@keyframes blur {
  0% { -webkit-filter: blur(0px); }
  50% { -webkit-filter: blur(5px); }
  100% { -webkit-filter: blur(0px); }
}
var rotation = 0;

$('button').on('click', function() { 
  rotation = rotation + 180

  $('#cube').addClass('spin');
  
  $('#cube').css({
    '-webkit-transform': 'rotateY(' + rotation + 'deg) translateX(-40px)',
    '-moz-transform': 'rotateY(' + rotation + 'deg) translateX(-40px)',
    'transform': 'rotateY(' + rotation + 'deg) translateX(-40px)'
  });

  $('.container').addClass('blur');

  setTimeout(function() {
    $('.container').removeClass('blur');
  },250);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js