Problems with CSS Animation

Question

http://codepen.io/Feners4/pen/KggAwg

I want the cubes to stay in place and rotate on axis 360 deg. My cubes do rotate on axis 360 deg. but the animation goes all crazy and the cubes also move out of place. How can I have them rotate in place?

My CSS:

@red: rgb(131, 168, 226);
@size: 100px;
body {
  background-color: #dff;
}

header {
  text-align: center;
}

h1 {
  text-align: center;
  padding: 9px;
}

.wrap {
  perspective: 1000px;
  perspective-origin: 46% 70px;
}

.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 100px;
  width: 200px;
  height: 200px;
}
.cube:hover {
  animation-play-state: running;
}
@keyframes spin {
  5% {
    transform: rotateY(360deg);
  }
}

.back {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-270deg) translateX(87px);
  transform-origin: top right;
}

.left {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-109px);
  transform-origin: top center;
}

.bottom {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(90deg) translateY(109px);
  transform-origin: bottom center;
}

.front {
  text-align: center;
  color: rgb(173, 222, 247);
  opacity: 0.50;
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(109px);
}

.wrap2 {
  perspective: 1000px;
  perspective-origin: 40% 70px;
}

.cube2 {
  position: relative;
  width: 100px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube2 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 500px;
  width: 200px;
  height: 200px;
}

.cube2:hover {
  animation-play-state: running;
}

.back2 {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-100px) rotateY(180deg);
}

.right2 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-90deg) translateX(87px);
  transform-origin: top right;
}

.left2 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(90deg) translateX(-100px);
  transform-origin: center left;
}

.top2 {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-109px);
  transform-origin: top center;
}

.bottom2 {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(90deg) translateY(109px);
  transform-origin: bottom center;
}

.front2 {
  text-align: center;
  opacity: 0.50;
  color: rgb(173, 222, 247);
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(109px);
}

.wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
}

.cube3 {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube3 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 999px;
  width: 200px;
  height: 200px;
}

.cube3:hover {
  animation-play-state: running;
}

.back3 {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-110px) rotateY(180deg);
}

.right3 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-95deg) translateX(110px);
  transform-origin: top right;
}

.left3 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-270deg) translateX(-90px);
  transform-origin: center left;
}

.top3 {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-95px);
  transform-origin: top center;
}

.bottom3 {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(92deg) translateY(109px);
  transform-origin: bottom center;
}

.front3 {
  text-align: center;
  color: rgb(173, 222, 247);
  opacity: 0.50;
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(99px);
}

.change-color {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

.change-color:hover,
.change-color:focus,
.change-color:active {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

Answer 1

I never worked on transformations before, but I gave it a try,

After looking at your css, I thought .wrap class should have the attributes left and position so added those attributes, and removed left attribute from .cube div

I have changed your code

.wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
}

.cube3 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 999px;
  width: 200px;
  height: 200px;
}

to

.wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
  position: absolute; // added position and left
  left: 999px;
}

.cube3 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute; // kept the position of its child tags, but removed left attribute
  width: 200px;
  height: 200px;
}

Updated:

For crazy rotation fix, change the below code

here you haven't mentioned 0% of time, what animation has to do, so its going crazy, after reaching 5% of the time (0.5 seconds), its started rotating 360 along y-axis

@keyframes spin {
  5% {
    transform: rotateY(360deg);
  }
}

to

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

I change to 0%, so from start to end it will rotate 360deg along y-axis.

I haven't dig too much for the second box rotation issue, as most of the classes are redundant, so I removed all those classes.

@red: rgb(131, 168, 226);
@size: 100px;
body {
  background-color: #dff;
}

header {
  text-align: center;
}

h1 {
  text-align: center;
  padding: 9px;
}



.wrap {
  perspective: 1000px;
  perspective-origin: 46% 70px;
  left: 100px;
  position: absolute;
}

.wrap2 {
  perspective: 1000px;
  perspective-origin: 40% 70px;
  position: absolute;
  left: 500px;
}

.wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
  position: absolute;
  left: 999px;
}

.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  width: 200px;
  height: 200px;
}
.cube:hover {
  animation-play-state: running;
}

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

.back {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-270deg) translateX(87px);
  transform-origin: top right;
}

.left {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-109px);
  transform-origin: top center;
}

.bottom {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(90deg) translateY(109px);
  transform-origin: bottom center;
}

.front {
  text-align: center;
  color: rgb(173, 222, 247);
  opacity: 0.50;
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(109px);
}

.change-color {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

.change-color:hover,
.change-color:focus,
.change-color:active {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

example