Rotating Cube

a-rotating-cube.markdown

Rotating Cube

A Rotating Cube created using pure CSS

A Pen by Akash Kumar on CodePen.

License.

index.html

<h1>Rotating Cube</h1>
<hr>
<div id="cube">
  <div id="side1"></div>
  <div id="side2"></div>
  <div id="side3"></div>
  <div id="side4"></div>
  <div id="side5"></div>
  <div id="side6"></div>
</div>

style.css

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400");

body {
  font-family: "Open Sans";
  background: #7f7fd5; /* fallback for old browsers */
  background: linear-gradient(227deg, #7f7fd5, #86a8e7, #91eae4);
  background-size: 600% 600%;
  margin: 20px auto;
}

h1 {
  text-align: center;
  color: #deffed;
  font-size: 60px;
  font-weight: 300;
  margin-bottom: 5px;
}

hr {
  width: 20%;
  border: 1px solid #fff
}

#cube {
  width: 112px;
  height: 112px;
  top: 50px;
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
  -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
  -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
  margin: auto;
  position: relative;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-animation: cubeRotation 5s infinite; /* Safari 4.0 - 8.0 */
  animation: cubeRotation 5s infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes cubeRotation {
  0% {
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
  }
  50% {
    -webkit-transform: rotateX(-22deg) rotateY(-128deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);
  }
}
/* Standard syntax */
@keyframes cubeRotation {
  0% {
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(-22deg) rotateY(-238deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);
  }
}
#cube > div {
  position: absolute;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  width: 112px;
  height: 112px;
  float: left;
  overflow: hidden;
  opacity: 0.85;
}
#side1 {
  transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
  -moz-transform: rotatex(90deg) translateX(0px) translateY(0px)
    translateZ(56px);
  -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px)
    translateZ(56px);
  background: #d1913c; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #ffd194,
    #d1913c
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #ffd194,
    #d1913c
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#side2 {
  transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
  -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px)
    translateZ(56px);
  -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px)
    translateZ(56px);
  background: #7b4397; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #dc2430,
    #7b4397
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #dc2430,
    #7b4397
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#side3 {
  transform: translateX(0px) translateY(0px) translateZ(56px);
  -moz-transform: translateX(0px) translateY(0px) translateZ(56px);
  -webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
  background: #00bf8f; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #001510,
    #00bf8f
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #001510,
    #00bf8f
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#side4 {
  transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
  -moz-transform: rotateY(90deg) translateX(0px) translateY(0px)
    translateZ(56px);
  -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px)
    translateZ(56px);
  background: #ffe000; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #799f0c,
    #ffe000
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #799f0c,
    #ffe000
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#side5 {
  transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
  -moz-transform: rotateY(180deg) translateX(0px) translateY(0px)
    translateZ(56px);
  -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px)
    translateZ(56px);
  background: #43cea2; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #185a9d,
    #43cea2
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #185a9d,
    #43cea2
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#side6 {
  transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
  -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px)
    translateZ(56px);
  -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px)
    translateZ(56px);
  background: #fdfc47; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #24fe41,
    #fdfc47
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #24fe41,
    #fdfc47
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* Animation */
-webkit-animation: BackgroundAnimation 30s ease infinite;
-moz-animation: BackgroundAnimation 30s ease infinite;
animation: BackgroundAnimation 30s ease infinite;

@-webkit-keyframes BackgroundAnimation {
  0% {
    background-position: 91% 0%;
  }
  50% {
    background-position: 10% 100%;
  }
  100% {
    background-position: 91% 0%;
  }
}
@-moz-keyframes BackgroundAnimation {
  0% {
    background-position: 91% 0%;
  }
  50% {
    background-position: 10% 100%;
  }
  100% {
    background-position: 91% 0%;
  }
}
@keyframes BackgroundAnimation {
  0% {
    background-position: 91% 0%;
  }
  50% {
    background-position: 10% 100%;
  }
  100% {
    background-position: 91% 0%;
  }
}