A Pen by Jon B.

index.html

<div class="container">
  
  <div class="item is-far">
    
    <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>
  
  <div class="item is-mid">
    
    <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>
  
  <div class="item is-near">

    <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>
  
</div>

Jchjr.markdown

Jchjr

A Pen by Jon B on CodePen.

License.

style.css

html,
body{
  height:100%;
  padding:0;
  margin:0;
}

.container {
  position:relative;
  background:#ddd;
  height:100%;
  perspective: 800px;
  perspective-origin:50% 50%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling:touch;
}

.item {
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  height:200%;
}

.item.is-near {
  transform: translateZ(0) translateX(-33.333%);
}
.item.is-mid {
  transform: translateZ(-400px) translateX(0);
}
.item.is-far {
  transform: translateZ(-800px) translateX(33.333%);
}

.content {
  position: absolute;
  font-size: 10vh;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%, -50%);
}

.cube {
  transform-style: preserve-3d;
  position: absolute;
  font-size: 10vh;
	height: 200px;
	width: 200px;
  left: 50%;
  top: 50%;
  
  transform-origin:50% 50%;
  transform: translate(-50%, -50%) rotateX(-45deg) rotateY(45deg);
  
	animation: spinX 5s infinite linear;
}

.cube div {
  background:rgba(255,255,255,.5);
  outline:1px solid currentColor;
	position: absolute;
  text-align: center;
	height: 100%;
	width: 100%;
  left:0;
  top:0;
}

.cube div:before {
  vertical-align:middle;
  display:inline-block;
  height:100%;
  content:'';
  width:0;
}

.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);
}


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