body {
                background-color: #eee;
            }

  .cube h2
  {
    text-align: center;
    font-size: 30px;
    padding-bottom: 10px;
    padding-top: 4px;
    margin:0px;
  } 
.cube h3
  {
    text-align: center;
    color:#ff4081;
    font-size: 20px;
    padding-bottom: 2px;
    padding-top: 2px;
    margin:0px;
  }

            .wrap {
                margin-top: 120px;
                perspective: 1000px;
                perspective-origin: 50% 50%;
                
                /*
                background-image: linear-gradient(135deg,#ccc 25%,#ddd 25%,#ddd 50%, #ccc 50%, #ccc 75%,#ddd 75%,#ddd 100%);
                background-size: 80px 80px;
                border-top: solid 3px #999;
                border-bottom: solid 3px #999;
                
                animation: bganim 3s linear 2s infinite; */
                /* Background stripes animation */
            }

            @keyframes bganim {
                from {
                    background-position: 0px;
                }

                to {
                    background-position: 80px;
                }
            }

            .cube {
                margin: auto;
                position: relative;
                height: 240px;
                width: 240px;
                transform-style: preserve-3d;
            }

                .cube div {
                    position: absolute;
                    padding: 10px;
                    box-sizing: border-box;
                    height: 100%;
                    width: 100%;
                    opacity: 0.9;
                    background-color: #000;
                    border: solid 1px #eee;
                    color: #fff;
                    font: 10px arial;
                    transition: transform 0.2s ease-in;
                }

            .front {
                transform: translateZ(120px);
            }

            .back {
                transform: translateZ(-120px) rotateY(180deg);
            }

            .right {
                transform: rotateY(-270deg) translateX(120px);
                transform-origin: top right;
            }

            .left {
                transform: rotateY(270deg) translateX(-120px);
                transform-origin: center left;
            }

            .top {
                transform: rotateX(-270deg) translateY(-120px);
                transform-origin: top center;
            }

            .bottom {
                transform: rotateX(270deg) translateY(120px);
                transform-origin: bottom center;
            }

            @keyframes rotate {
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }

                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }

            .cube {
                animation: rotate 20s infinite linear;
            }

/*
            .wrap:hover .front {
                transform: translateZ(200px);
            }

            .wrap:hover .back {
                transform: translateZ(-200px) rotateY(180deg);
            }

            .wrap:hover .right {
                transform: rotateY(-270deg) translateZ(100px) translateX(100px);
            }

            .wrap:hover .left {
                transform: rotateY(270deg) translateZ(100px) translateX(-100px);
            }

            .wrap:hover .top {
                transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
            }

            .wrap:hover .bottom {
                transform: rotateX(270deg) translateZ(100px) translateY(100px);
            }
*/










/*
.wrap {
  margin-top: 150px;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}


.cube {
  margin: auto;
  position: relative;
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
}

.cube > div {
  position: absolute;
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  background-color: #000;
  border: solid 1px #eeeeee;
  color: #ffffff;
}



.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-270deg) translateY(-100px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(100px);
  transform-origin: bottom center;
}



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

.cube {
  animation: rotate 20s infinite linear;
}

.cube > div {
  transition: transform 0.2s ease-in;
}


.wrap:hover .front {
  transform: translateZ(200px);
}

.wrap:hover .back {
  transform: translateZ(-200px) rotateY(180deg);
}

.wrap:hover .right {
  transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}

.wrap:hover .left {
  transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}

.wrap:hover .top {
  transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}

.wrap:hover .bottom {
  transform: rotateX(270deg) translateZ(100px) translateY(100px);
}
*/