CSS3- cube ad rotation

Cube four face rolling advertisement:
4 is a longitudinal plane advertising image, playback display by animation automatically rotated as shown:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 200px;
            height: 200px;
            /*border: 1px Solid # 000; * / 
            margin : 0 Auto ; 
            margin-Top : by 150px ; 
            List-style : none ; 
            Transform-style : the preserve-3D ; / * set the property to the parent element may be sub-elements in 3D display , default 2D * / 
            position : relative ; 
            Transform : rotateX (0deg) rotateY (0deg) ; 
            Animation : xuanzuan Linear 10s 0s Infinite ; 
        } 
        UL: hover { 
            Animation-Play-State:paused;
        }
        @keyframes xuanzuan {
            from{
                transform: rotateX(0deg);
            }
            to{
                transform: rotateX(360deg);
            }
        }
        ul li{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 40px;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul li:nth-of-type(1){
            background-color: red;
            transform:rotateX(360deg) translateZ(100px);
        }
        ul li:nth-of-type(2){
            background-color: green;
            transform:rotateX(270deg) translateZ(100px);
        }
        ul li:nth-of-type(3){
            background-color: blue;
            transform:rotateX(180deg) translateZ(100px);
        }
        ul li:nth-of-type(4){
            background-color: yellow;
            transform:rotateX(90deg) translateZ(100px);
        }
        ul li:nth-of-type(5){
            background-color: salmon;
            transform:rotateY(90deg) translateZ(100px) ;
        }
        ul li:nth-of-type(6){
            background-color: fuchsia;
            transform:rotateY(270deg) translateZ(100px) ;
        }
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div>
    <hr>
    <ul>
        <li><img src="video/images/girl.jpg" alt=""></li>
        <li><img src="video/images/banner2.jpg" alt=""></li>
        <li><img src="video/images/banner3.jpg" alt=""></li>
        <li><img src="video/images/banner4.jpg" alt=""></li>
        <li><img src="video/images/banner4.jpg" alt=""></li>
        <li><img src="video/images/banner4.jpg" alt=""></li>
    </ul>
    <hr>
</div>

</body>
</html>
CSS3- cube ad rotation

Guess you like
