Pure handwritten css3 cube rotation effect

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css3旋转立方体效果</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 400px;
                height: 400px;
                border : 1px solid # 000 ; 
                margin : 30px auto ; 
                perspective : 1200px ; _ _ _ 
                _ _ and Chrome */ } 
            .box ul { 
                width : 300px ; 
                height : 300px ; 
                border : 1px solid #000000 ; 
                position 
            : relative ; 
                transform-style : preserve-3d ; /*Set 3d scene*/ 
                -webkit-transform-style : preserve-3d ;     /* Safari and Chrome */ 
                animation : move 2s infinite linear ;   /* Motion time represents animation loop Speed */ 
                transform-origin : center center 150px ;  /* The third one needs to give a specific value */ 
                -webkit-transform-origin : center center 150px ; 
                margin : 50px ; 
            }
            .box ul li{
                width: 300px;
                height: 300px;
                line-height: 300px;
                position: absolute;
                font-size: 50px;
                transition: all .5s;
                text-align: center;
                list-style: none;
            }
            .box ul li:nth-of-type(1){
                background: red;
                opacity: 0.5;
            }
            .box ul li:nth-of-type(2){
                background: blue;
                opacity: 0.5;
                transform: translateX(300px) rotateY(-90deg);
                -webkit-transform: translateX(300px) rotateY(-90deg);    /* Safari 和 Chrome */
                transform-origin: left;
                -webkit-transform-origin:left;
            }
            .box ul li:nth-of-type(3){
                background: blueviolet;
                opacity: 0.5;
                transform: translateX(-300px) rotateY(90deg);
                -webkit-transform: translateX(-300px) rotateY(90deg);
                transform-origin: right;
                -webkit-transform-origin:right;
            }
            .box ul li:nth-of-type(4){
                background: brown;
                opacity: 0.5;
                transform: translateY(-300px) rotateX(-90deg);
                -webkit-transform: translateY(-300px) rotateX(-90deg);
                transform-origin: bottom;
                -webkit-transform-origin:bottom;
            }
            .box ul li:nth-of-type(5){
                background: deeppink;
                opacity: 0.5;
                transform: translateY(300px) rotateX(90deg);
                -webkit-transform: translateY(300px) rotateX(90deg);
                transform-origin: top;
                -webkit-transform-origin:top;
            }
            .box ul li:nth-of-type(6){
                background: yellow;
                opacity: 0.5;
                transform: translateZ(300px);
                -webkit-transform: translateZ(300px);
            }
            @keyframes move{
                from{transform: rotateY(0deg);}
                to{transform: rotateY(360deg);}
            }
            @-webkit-keyframes move{
                from{-webkit-transform: rotateY(0deg);}
                to{-webkit-transform: rotateY(360deg);}
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li>最骚的css3</li>
                <li>最骚的css3</li>
                <li>最骚的css3</li>
                <li>最骚的css3</li>
                <li>最骚的css3</li>
                <li>最骚的css3</li>
            </ul>
        </div>
    </body>
</html>
Pure handwritten css3 cube rotation effect

Guess you like
