Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="big cog forwards" style="margin: 30px 30px">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="medium cog reverse" style="margin: 50px -26px">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="medium cog forwards" style="margin: 32px 18px">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
              
            
!

CSS

              
                /* Taylor cos approximation series */
/* Sin tests */
/*
@debug "sin(0) " + _sin(0);
@debug "sin(90) " + _sin(90);
@debug "sin(180) " + _sin(180);
@debug "sin(270) " + _sin(270);
*/
/* Taylor cos approximation series */
/* Cos tests */
/*
@debug "cos(0) " + _cos(0);
@debug "cos(90) " + _cos(90);
@debug "cos(180) " + _cos(180);
@debug "cos(270) " + _cos(270);
*/
/* Stupid sass matrix multiplication bahahahahahahaa.... XD */
/* Return a unity (no transform) matrix */
/* Convert a 4x4 matrix into a string */
/* A scale matrix */
/* Rotation matrix for x, y, z */
/* A translate matrix */
@-webkit-keyframes cog-anim-spin {
  0% {
    -webkit-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

  100% {
    -webkit-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@-moz-keyframes cog-anim-spin {
  0% {
    -webkit-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

  100% {
    -webkit-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@-o-keyframes cog-anim-spin {
  0% {
    -webkit-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

  100% {
    -webkit-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@keyframes cog-anim-spin {
  0% {
    -webkit-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

  100% {
    -webkit-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@-webkit-keyframes cog-anim-spin-reverse {
  0% {
    -webkit-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

  100% {
    -webkit-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@-moz-keyframes cog-anim-spin-reverse {
  0% {
    -webkit-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

  100% {
    -webkit-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@-o-keyframes cog-anim-spin-reverse {
  0% {
    -webkit-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

  100% {
    -webkit-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@keyframes cog-anim-spin-reverse {
  0% {
    -webkit-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(-1.0, 0, 0, 0, 0, -1.0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

  100% {
    -webkit-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: perspective(10px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

.big {
  float: left;
  display: inline-block;
  height: 100px;
  width: 100px; }
  .big > div {
    display: inline-block;
    width: 100px;
    height: 100px; }

.medium {
  float: left;
  display: inline-block;
  height: 100px;
  width: 100px;
  -webkit-transform: perspective(10px) matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -moz-transform: perspective(10px) matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -ms-transform: perspective(10px) matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -o-transform: perspective(10px) matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: perspective(10px) matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  .medium > div {
    display: inline-block;
    width: 100px;
    height: 100px; }

.cog.forwards > div {
  -webkit-animation: cog-anim-spin 4s linear infinite;
  -moz-animation: cog-anim-spin 4s linear infinite;
  -o-animation: cog-anim-spin 4s linear infinite;
  animation: cog-anim-spin 4s linear infinite; }
.cog.reverse > div {
  -webkit-animation: cog-anim-spin-reverse 4s linear infinite;
  -moz-animation: cog-anim-spin-reverse 4s linear infinite;
  -o-animation: cog-anim-spin-reverse 4s linear infinite;
  animation: cog-anim-spin-reverse 4s linear infinite; }
.cog > div {
  background: #6f6f6f;
  border-radius: 100%;
  text-align: center; }
  .cog > div > div {
    background: #6f6f6f;
    display: block;
    float: left;
    position: absolute;
    width: 20px;
    margin-left: 40px;
    margin-top: 40px;
    height: 20px; }
    .cog > div > div:nth-child(1) {
      -webkit-transform: perspective(50px) matrix3d(1, 0, 0, 0, 0, 0.96593, 0.25882, 0, 0, -0.25882, 0.96593, 0, 0, -55, 0, 1);
      -moz-transform: perspective(50px) matrix3d(1, 0, 0, 0, 0, 0.96593, 0.25882, 0, 0, -0.25882, 0.96593, 0, 0, -55, 0, 1);
      -ms-transform: perspective(50px) matrix3d(1, 0, 0, 0, 0, 0.96593, 0.25882, 0, 0, -0.25882, 0.96593, 0, 0, -55, 0, 1);
      -o-transform: perspective(50px) matrix3d(1, 0, 0, 0, 0, 0.96593, 0.25882, 0, 0, -0.25882, 0.96593, 0, 0, -55, 0, 1);
      transform: perspective(50px) matrix3d(1, 0, 0, 0, 0, 0.96593, 0.25882, 0, 0, -0.25882, 0.96593, 0, 0, -55, 0, 1); }
    .cog > div > div:nth-child(2) {
      -webkit-transform: perspective(50px) matrix3d(0.70711, 0.70711, 0, 0, -0.68301, 0.68301, 0.25882, 0, 0.18301, -0.18301, 0.96593, 0, 38.89087, -38.89087, 0, 1);
      -moz-transform: perspective(50px) matrix3d(0.70711, 0.70711, 0, 0, -0.68301, 0.68301, 0.25882, 0, 0.18301, -0.18301, 0.96593, 0, 38.89087, -38.89087, 0, 1);
      -ms-transform: perspective(50px) matrix3d(0.70711, 0.70711, 0, 0, -0.68301, 0.68301, 0.25882, 0, 0.18301, -0.18301, 0.96593, 0, 38.89087, -38.89087, 0, 1);
      -o-transform: perspective(50px) matrix3d(0.70711, 0.70711, 0, 0, -0.68301, 0.68301, 0.25882, 0, 0.18301, -0.18301, 0.96593, 0, 38.89087, -38.89087, 0, 1);
      transform: perspective(50px) matrix3d(0.70711, 0.70711, 0, 0, -0.68301, 0.68301, 0.25882, 0, 0.18301, -0.18301, 0.96593, 0, 38.89087, -38.89087, 0, 1); }
    .cog > div > div:nth-child(3) {
      -webkit-transform: perspective(50px) matrix3d(0, 1.0, 0, 0, -0.96593, 0, 0.25882, 0, 0.25882, 0, 0.96593, 0, 55.0, 0, 0, 1);
      -moz-transform: perspective(50px) matrix3d(0, 1.0, 0, 0, -0.96593, 0, 0.25882, 0, 0.25882, 0, 0.96593, 0, 55.0, 0, 0, 1);
      -ms-transform: perspective(50px) matrix3d(0, 1.0, 0, 0, -0.96593, 0, 0.25882, 0, 0.25882, 0, 0.96593, 0, 55.0, 0, 0, 1);
      -o-transform: perspective(50px) matrix3d(0, 1.0, 0, 0, -0.96593, 0, 0.25882, 0, 0.25882, 0, 0.96593, 0, 55.0, 0, 0, 1);
      transform: perspective(50px) matrix3d(0, 1.0, 0, 0, -0.96593, 0, 0.25882, 0, 0.25882, 0, 0.96593, 0, 55.0, 0, 0, 1); }
    .cog > div > div:nth-child(4) {
      -webkit-transform: perspective(50px) matrix3d(-0.70711, 0.70711, 0, 0, -0.68301, -0.68301, 0.25882, 0, 0.18301, 0.18301, 0.96593, 0, 38.89087, 38.89087, 0, 1);
      -moz-transform: perspective(50px) matrix3d(-0.70711, 0.70711, 0, 0, -0.68301, -0.68301, 0.25882, 0, 0.18301, 0.18301, 0.96593, 0, 38.89087, 38.89087, 0, 1);
      -ms-transform: perspective(50px) matrix3d(-0.70711, 0.70711, 0, 0, -0.68301, -0.68301, 0.25882, 0, 0.18301, 0.18301, 0.96593, 0, 38.89087, 38.89087, 0, 1);
      -o-transform: perspective(50px) matrix3d(-0.70711, 0.70711, 0, 0, -0.68301, -0.68301, 0.25882, 0, 0.18301, 0.18301, 0.96593, 0, 38.89087, 38.89087, 0, 1);
      transform: perspective(50px) matrix3d(-0.70711, 0.70711, 0, 0, -0.68301, -0.68301, 0.25882, 0, 0.18301, 0.18301, 0.96593, 0, 38.89087, 38.89087, 0, 1); }
    .cog > div > div:nth-child(5) {
      -webkit-transform: perspective(50px) matrix3d(-1.0, 0, 0, 0, 0, -0.96593, 0.25882, 0, 0, 0.25882, 0.96593, 0, 0, 55.0, 0, 1);
      -moz-transform: perspective(50px) matrix3d(-1.0, 0, 0, 0, 0, -0.96593, 0.25882, 0, 0, 0.25882, 0.96593, 0, 0, 55.0, 0, 1);
      -ms-transform: perspective(50px) matrix3d(-1.0, 0, 0, 0, 0, -0.96593, 0.25882, 0, 0, 0.25882, 0.96593, 0, 0, 55.0, 0, 1);
      -o-transform: perspective(50px) matrix3d(-1.0, 0, 0, 0, 0, -0.96593, 0.25882, 0, 0, 0.25882, 0.96593, 0, 0, 55.0, 0, 1);
      transform: perspective(50px) matrix3d(-1.0, 0, 0, 0, 0, -0.96593, 0.25882, 0, 0, 0.25882, 0.96593, 0, 0, 55.0, 0, 1); }
    .cog > div > div:nth-child(6) {
      -webkit-transform: perspective(50px) matrix3d(-0.70711, -0.70711, 0, 0, 0.68301, -0.68301, 0.25882, 0, -0.18301, 0.18301, 0.96593, 0, -38.89087, 38.89087, 0, 1);
      -moz-transform: perspective(50px) matrix3d(-0.70711, -0.70711, 0, 0, 0.68301, -0.68301, 0.25882, 0, -0.18301, 0.18301, 0.96593, 0, -38.89087, 38.89087, 0, 1);
      -ms-transform: perspective(50px) matrix3d(-0.70711, -0.70711, 0, 0, 0.68301, -0.68301, 0.25882, 0, -0.18301, 0.18301, 0.96593, 0, -38.89087, 38.89087, 0, 1);
      -o-transform: perspective(50px) matrix3d(-0.70711, -0.70711, 0, 0, 0.68301, -0.68301, 0.25882, 0, -0.18301, 0.18301, 0.96593, 0, -38.89087, 38.89087, 0, 1);
      transform: perspective(50px) matrix3d(-0.70711, -0.70711, 0, 0, 0.68301, -0.68301, 0.25882, 0, -0.18301, 0.18301, 0.96593, 0, -38.89087, 38.89087, 0, 1); }
    .cog > div > div:nth-child(7) {
      -webkit-transform: perspective(50px) matrix3d(0, -1.0, 0, 0, 0.96593, 0, 0.25882, 0, -0.25882, 0, 0.96593, 0, -54.99999, 0, 0, 1);
      -moz-transform: perspective(50px) matrix3d(0, -1.0, 0, 0, 0.96593, 0, 0.25882, 0, -0.25882, 0, 0.96593, 0, -54.99999, 0, 0, 1);
      -ms-transform: perspective(50px) matrix3d(0, -1.0, 0, 0, 0.96593, 0, 0.25882, 0, -0.25882, 0, 0.96593, 0, -54.99999, 0, 0, 1);
      -o-transform: perspective(50px) matrix3d(0, -1.0, 0, 0, 0.96593, 0, 0.25882, 0, -0.25882, 0, 0.96593, 0, -54.99999, 0, 0, 1);
      transform: perspective(50px) matrix3d(0, -1.0, 0, 0, 0.96593, 0, 0.25882, 0, -0.25882, 0, 0.96593, 0, -54.99999, 0, 0, 1); }
    .cog > div > div:nth-child(8) {
      -webkit-transform: perspective(50px) matrix3d(0.70712, -0.7071, 0, 0, 0.68301, 0.68303, 0.25882, 0, -0.18301, -0.18302, 0.96593, 0, -38.89066, -38.89177, 0, 1);
      -moz-transform: perspective(50px) matrix3d(0.70712, -0.7071, 0, 0, 0.68301, 0.68303, 0.25882, 0, -0.18301, -0.18302, 0.96593, 0, -38.89066, -38.89177, 0, 1);
      -ms-transform: perspective(50px) matrix3d(0.70712, -0.7071, 0, 0, 0.68301, 0.68303, 0.25882, 0, -0.18301, -0.18302, 0.96593, 0, -38.89066, -38.89177, 0, 1);
      -o-transform: perspective(50px) matrix3d(0.70712, -0.7071, 0, 0, 0.68301, 0.68303, 0.25882, 0, -0.18301, -0.18302, 0.96593, 0, -38.89066, -38.89177, 0, 1);
      transform: perspective(50px) matrix3d(0.70712, -0.7071, 0, 0, 0.68301, 0.68303, 0.25882, 0, -0.18301, -0.18302, 0.96593, 0, -38.89066, -38.89177, 0, 1); }

              
            
!

JS

              
                
              
            
!
999px

Console