Rotating 3d cubes

Recreating the animated gif from: imageofthestudio.com with css3. Soon to be cross browser tested.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Rotating 3d cubes</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class = "container1">
  <div class="cube spin1 ">
    <div class="face one">
    </div>
    <div class="face two">
    </div>
    <div class="face three">
    </div>
    <div class="face four">
    </div>
    <div class="face five">
    </div>
    <div class="face six">
    </div>
  </div>
</div>

<div class = "container2">
  <div class="cube spin2">
    <div class="face one">
    </div>
    <div class="face two">
    </div>
    <div class="face three">
    </div>
    <div class="face four">
    </div>
    <div class="face five">
    </div>
    <div class="face six">
    </div>
  </div>
</div>

<div class = "container3">
  <div class="cube spin3">
    <div class="face one">
    </div>
    <div class="face two">
    </div>
    <div class="face three">
    </div>
    <div class="face four">
    </div>
    <div class="face five">
    </div>
    <div class="face six">
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body{background-color: #20215C;}
.container1 {
  -webkit-perspective: 1200;
  perspective: 1200;
  -webkit-perspective-origin: 50% 200px;
  perspective-origin: 50% 200px;
  position: absolute;
  top: 120px;
  right: 300px;
}

.container2 {
  -webkit-perspective: 1200;
  perspective: 1200;
  -webkit-perspective-origin: 50% 200px;
  perspective-origin: 50% 200px;
  position: absolute;
  top: 120px;
  right: 80px;
}

.container3 {
  -webkit-perspective: 1200;
  perspective: 1200;
  -webkit-perspective-origin: 50% 200px;
  perspective-origin: 50% 200px;
  position: absolute;
  top: 120px;
  left: 80px;
}




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


@-webkit-keyframes spinner2 { 
  from {-webkit-transform: rotateY(180deg) rotateX(180deg);} 
  to {-webkit-transform: rotateY(-180deg) rotateX(-180deg);} 
} 
@keyframes spinner2 { 
  from {transform: rotateY(180deg) rotateX(180deg);} 
  to {transform: rotateY(-180deg) rotateX(-180deg);} 
}


@-webkit-keyframes spinner3 { 
  from {-webkit-transform: rotateY(30deg) rotateX(30deg);} 
  to {-webkit-transform: rotateY(-180deg) rotateX(-180deg);} 
}
@keyframes spinner3 { 
  from {transform: rotateY(30deg) rotateX(30deg);} 
  to {transform: rotateY(-180deg) rotateX(-180deg);} 
} 

.spin1 {
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  -webkit-animation-name: spinner; slider1
  -webkit-animation-timing-function: linear; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 6s; 
  -webkit-transform-style: preserve-3d;
  
  animation-name: spinner; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 6s; 
  transform-style: preserve-3d;
  
}

.spin2 {
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  -webkit-animation-name: spinner2; 
  -webkit-animation-timing-function: linear; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 6s; 
  -webkit-transform-style: preserve-3d;
  
  animation-name: spinner2; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 6s; 
  transform-style: preserve-3d;
  
}

.spin3 {
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  -webkit-animation-name: spinner2; 
  -webkit-animation-timing-function: linear; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 6s; 
  -webkit-transform-style: preserve-3d;
  
  animation-name: spinner2; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 6s; 
  transform-style: preserve-3d;
  
}

.face {
  position: absolute;
  height: 100px;
  width: 100px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.7);
}

.cube .one  {
  -webkit-transform: rotateX(90deg) translateZ(70px);
  transform: rotateX(90deg) translateZ(70px);
}

.cube .two {
  -webkit-transform: translateZ(70px);
  transform: translateZ(70px);
}

.cube .three {
  -webkit-transform: rotateY(90deg) translateZ(70px);
  transform: rotateY(90deg) translateZ(70px);
}

.cube .four {
  -webkit-transform: rotateY(180deg) translateZ(70px);
  transform: rotateY(180deg) translateZ(70px);
}

.cube .five {
  -webkit-transform: rotateY(-90deg) translateZ(70px);
  transform: rotateY(-90deg) translateZ(70px);
}

.cube .six {
  -webkit-transform: rotateX(-90deg) translateZ(70px) rotate(180deg);
  transform: rotateX(-90deg) translateZ(70px) rotate(180deg);
}


/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Rotating 3d cubes ) is write by Joseph Mueller, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Joseph Mueller

More from Joseph Mueller

You Might Also Like