CSS3翻转效果

最新推荐文章于 2024-03-03 20:00:31 发布

闻大师

最新推荐文章于 2024-03-03 20:00:31 发布

阅读量225

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qq_33325959/article/details/78656405

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <title>翻转效果</title>
    <style type=text/css>
        .container{
            width: 500px;
            height: 500px;
            border: 1px solid #3c3c3c;
            position: relative;
            text-align: center;
            font-size: 100px;
            animation: rot 5s infinite;
            -webkit-transform-style:preserve-3d;
        }
        @keyframes rot{
            0% {transform: rotateY(0deg);}
            30% {transform: rotateY(180deg);}
            50% {transform: rotateY(180deg);}
            70% {transform: rotateY(360deg);}
            100% {transform: rotateY(360deg);}

        }
        .before{
            width: 500px;
            height: 500px;
            background: #f0f;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
        }
        .after{
            width: 500px;
            height: 500px;
            background: #0ff;
            position: absolute;
            top: 0;
            left: 0;
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="before">前面</div>
        <div class="after">后面</div>
    </div>
</body>

</html>

闻大师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录