html5 學習-3d動畫

xiaopengyaonixi發表於2016-10-08
HTML3D動畫
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            margin:0 auto;
            width:1200px;
            height:405px;
            background:url(demo.jpg) center no-repeat;
            /*定義3d空間*/
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            /*定義動畫名稱*/
            -webkit-animation-name: myfirst;
            -moz-animation-name: myfirst;
            -o-animation-name: myfirst;
            animation-name: myfirst;
            /*定義動畫時間*/
            -webkit-animation-duration: 20s;
            -moz-animation-duration: 20s;
            -o-animation-duration: 20s;
            animation-duration: 20s;
            /*定義動畫播放的次數*/
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            /*定義動畫過渡的效果為線性*/
            -webkit-animation-timing-function: linear;
            -moz-animation-timing-function: linear;
            -o-animation-timing-function: linear;
            animation-timing-function: linear;
        }

        /*呼叫動畫*/
        @keyframes myfirst {
            0%{
                -webkit-transform: rotateY(0deg);
            }
            50%{
                -webkit-transform: rotateY(180deg);
            }
            100%{
                -webkit-transform: rotateY(360deg);
            }
        }

        @-webkit-keyframes myfirst {
            0%{
                -webkit-transform: rotateY(0deg);
            }
            50%{
                -webkit-transform: rotateY(180deg);
            }
            100%{
                -webkit-transform: rotateY(360deg);
            }
        }

        @-moz-keyframes myfirst {
            0%{
                -webkit-transform: rotateY(0deg);
            }
            50%{
                -webkit-transform: rotateY(180deg);
            }
            100%{
                -webkit-transform: rotateY(360deg);
            }
        }

        @-o-keyframes myfirst {
            0%{
                -webkit-transform: rotateY(0deg);
            }
            50%{
                -webkit-transform: rotateY(180deg);
            }
            100%{
                -webkit-transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


相關文章