html5 学习-3d动画

最新推荐文章于 2021-01-31 21:41:51 发布

xiaopengyaonixi

最新推荐文章于 2021-01-31 21:41:51 发布

阅读量328

点赞数 1

分类专栏： Html5

本文链接：https://blog.csdn.net/W3Chhhhhh/article/details/52755172

版权

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!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>

xiaopengyaonixi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 学习-3d动画

Title div{ margin:0 auto; width:1200px; height:405px; background:url(demo.jpg) center no-repeat; /*定义3d空间*/ -webkit
复制链接

扫一扫