twobix rube

In this example below you will see how to do a twobix rube with some HTML / CSS and Javascript

This awesome code was written by refactorized, you can see more from this user in the personal repository.
You can find the original code on
Copyright refactorized ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>twobix rube</title>
      <link rel="stylesheet" href="css/style.css">



  <div class="cube">
  <div class="face side-u"></div>
  <div class="face side-r"></div>
  <div class="face side-f"></div>
  <div class="face side-d"></div>
  <div class="face side-l"></div>
  <div class="face side-b"></div>



/*Downloaded from */
.cube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: rotateY(45deg) rotateX(45deg);

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  border: solid black 1px;

.side-f {
  background-color: white;
  transform: rotateY(0deg) rotateZ(0deg) translateX(50px);

.side-r {
  background-color: green;
  transform: rotateY(90deg) rotateZ(0deg) translateX(50px);

.side-l {
  background-color: blue;
  transform: rotateY(180deg) rotateZ(0deg) translateX(50px);

.side-b {
  background-color: yellow;
  transform: rotateY(270deg) rotateZ(0deg) translateX(50px);