<div class="scene"></div>
<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="https://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.scene {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -192px 0 0 -192px;
  width: 384px;
  height: 384px;
  background: rgba(100, 100, 255, 0.2);
  transform: rotateX(60deg) rotateZ(60deg);
  transform-style: preserve-3d;
  transform-origin: center;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.