A Pen by Mr2P

Thumbnail
This awesome code was written by Mr2P, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Mr2P ©
  • HTML
  • CSS
  • JavaScript
    <div class="perspective">
  <div class="cube spin">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="left">3</div>
    <div class="right">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
  </div>
</div>
<hr />
<div>
  <input id="toggle_spinning" type="button" value="Toggle Spinning">
  <input id="toggle_backface" type="button" value="Toggle Backface">
</div>


/*Downloaded from https://www.codeseek.co/Mr2P/a-pen-by-mr2p-GieHo */
    .perspective {
  width: 200px;
  height: 200px;  
  margin: 100px auto;
  perspective: 500px;
  border: 1px solid;
}
.cube {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  position: absolute;
}
.cube div {
  position: absolute;
  width: 196px;
  height: 196px;
  line-height: 196px;
  font-size: 10em;
  font-weight: bold;
  border: 2px solid #000;
  text-align: center;
  color: #fff;
}
.front {
  background: rgba(255,0,0,.6);
  transform: translateZ(100px);  
}
.back {
  background: rgba(255,255,0,.6);
  transform: rotateX(180deg) translateZ(100px);
}
.left {
  background: rgba(0,0,255,.6);
  transform: rotateY(90deg) translateZ(100px);
}
.right {
  background: rgba(255,0,255,.6);
  transform: rotateY(-90deg) translateZ(100px);
}
.top {
  background: rgba(0,255,0,.6);
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  background: rgba(0,255,255,.6);
  transform: rotateX(-90deg) translateZ(100px);
}
.spin {
  animation: spinning 10s ease-in-out infinite alternate;
}
@keyframes spinning {
  0% { transform: rotateX(0deg) rotateY(0deg) }
  100% { transform: rotateX(360deg) rotateY(360deg) }
}
.hide-backface div {
  backface-visibility: hidden;
}


/*Downloaded from https://www.codeseek.co/Mr2P/a-pen-by-mr2p-GieHo */
    !function($) {
  $(function() {
    $('#toggle_spinning').on('click', function(e) {
      e.preventDefault();
      $('.cube').toggleClass('spin');
    });
    $('#toggle_backface').on('click', function(e) {
      e.preventDefault();
      $('.cube').toggleClass('hide-backface');
    });
  });
}(jQuery)

Comments