CSS3 3D rotate spinning carrousel

by fredd man

HTML

<div class="stage">
    <div class="spinner">
        <img style="-webkit-transform: rotateY(-0deg) translateX(180px); padding: 0 0 0 160px;" src="https://1n469r2k28cd3i0ovv1yqnaz-wpengine.netdna-ssl.com/wp-content/uploads/2017/07/amazon-web-services-gray.svg" width="200" height="160" alt="">
        <img style="-webkit-transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 147px;" src="" width="213" height="160" alt="">
        <img style="-webkit-transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="" width="240" height="160" alt="">
        <img style="-webkit-transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px;" src="" width="213" height="160" alt="">
        <img style="-webkit-transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 122px;" src="" width="238" height="160" alt="">
    </div>
</div>

CSS

/*
    Credit to : http://www.the-art-of-web.com/css/3d-transforms/
*/

.stage {
    margin: 2em;
    padding-left:180px;
    height: 160px;
    background:rgba(0,0,0,0.1);
    -webkit-perspective: 1500px;
    -moz-perspective: 1500px;
}

@-webkit-keyframes spinner {
    from {
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-360deg);
    }
}
@-moz-keyframes spinner {
    from {
        -moz-transform: rotateY(0deg);
    }
    to {
        -moz-transform: rotateY(-360deg);
    }
}

.spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 180px 0 0;
    
    -moz-animation-name: spinner;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 6s;
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: 180px 0 0;
}

.spinner:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
}

.spinner img {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 120px;
    height: 530px;
    z-index: 9999px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.8);
    -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}