An-Anonymous-Pen.markdown

An Anonymous Pen

I haven't done much of anything with CSS perspective or animations, so I just figured I'd start my day off following a simple tutorial blogged by David Walsh (http://davidwalsh.name/css-cube).

A Pen by A Non Ymous on CodePen.

License.

index.html

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

script.js

// Following the tutorial blogged by David Walsh (http://davidwalsh.name/) I enabled prefix free and disabled normalize for this to work.

style.scss

@import "compass";
.wrap {
  margin: 5em 10em;
	perspective: 800px;
	perspective-origin: 50% 100px;
} // .wrap

@keyframes spin {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}

.cube {
  animation: spin 20s infinite linear;
	position: relative;
	width: 200px;
	transform-style: preserve-3d;
  
  div {
    box-shadow: inset 0 0 30px rgba(125, 125, 125, .8);
    color: #444;
    font-size: 2em;
    height: 200px;
    line-height: 6;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
  }
  
  .back {	transform: translateZ(-100px) rotateY(180deg); }
  
  .right { 
    transform: rotateY(-270deg) translateX(100px);
	  transform-origin: top right;
  }

  .left {
	  transform: rotateY(270deg) translateX(-100px);
	  transform-origin: center left;
  }
  
  .top {
	  transform: rotateX(-90deg) translateY(-100px);
	  transform-origin: top center;
  }
  
  .bottom {
	  transform: rotateX(90deg) translateY(100px);
	  transform-origin: bottom center;
  }
  
  .front { transform: translateZ(100px); }
} // .cube