body,

html {

    overflow: hidden;

}

​

div {

    transform-style: preserve-3d;

    perspective: 500px;

}

​

.reverseRotate {

    margin: 20vh auto;

}

​

.rotate,

.reverseRotate {

    width: 50vh;

    height: 50vh;

}

​

.content {

    width: 100%;

    height: 100%;

    line-height: 50vh;

    text-align: center;

    background-color: rgba(255, 100, 100, .8);

    font-size: 5vh;

    color: #fff;

    box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);

}

​

.rotate {

    animation: rotate 5s linear infinite; 

}

​

.reverseRotate {

    animation: reverseRotate 5s linear infinite; 

}

​

@keyframes rotate {

    0% {

        transform: rotateX(0deg) rotateZ(0deg);

    }

    50% {

        transform: rotateX(40deg) rotateZ(180deg);

    }

    100% {

        transform: rotateX(0deg) rotateZ(360deg);

    }

}

​

@keyframes reverseRotate {

    0% {

        transform: rotateZ(0deg);

    }

    100% {

        transform: rotateZ(-360deg);

    }

}

​

// .single {

//     float:left;

//     line-height: 50vh;

//     text-align: center;

//     background-color: rgba(255, 100, 100, .8);

//     font-size: 5vh;

//     color: #fff;

//     margin: 20vh auto;

//     box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);

// }