body {
    background-color: #eee;
    margin: 0px;
}

.wrap {
    margin: 10px 2px 20px 2px;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    border: solid 3px white;
    border-radius: 10px;
    height: 500px;
    background-color: blueviolet;
    overflow: hidden;
    z-index: -1;
}

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

.cube div {
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    opacity: 0.9;
    background-color: blue;
    border: solid 1px #fff180;
    color: #fff;
    font: 12px verdana;
    text-align: center;
    transition: transform 0.2s ease-in;
}

.cube div:hover {
    background-color: black;
}

.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;
}

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

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

.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);
}
h2{
    color: yellow;
    margin: 10px 0 70px 10px;
    font-weight: bolder;
    font-size: 35px;
}

h3{
    color: yellow;
    font-weight: bold;
    font-size: 16px;
}

p{
    color: #fff155;
    font-size: 20px;
}