flip 翻转效果 css3实现

最新推荐文章于 2022-07-30 11:44:59 发布

苘迷

最新推荐文章于 2022-07-30 11:44:59 发布

阅读量192

点赞数

分类专栏：前端文章标签： css flip 翻转效果 css3实现

原文链接：https://www.mk2048.com/blog/blog.php?id=hikbb1kj12kj&title=flip+%E7%BF%BB%E8%BD%AC%E6%95%88%E6%9E%9C+css3%E5%AE%9E%E7%8E%B0

版权

前端专栏收录该内容

734 篇文章 1 订阅

订阅专栏

1.实现代码

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>flip 翻转效果css3实现</title>
        <style type="text/css">
            .container {
                perspective: 1000;
                transform-style: preserve-3d;
            }
            
            .container,
            .front,
            .back {
                width: 80px;
                height: 80px;
            }
            
            .flip {
                position: relative;
                transition: 0.6s;
                transform-style: preserve-3d;
            }
            
            .front,
            .back {
                position: absolute;
                top: 0;
                left: 0;
                backface-visibility: hidden;
            }
            
            .front {
                z-index: 2;
            }
            
            .back {
                transform: rotateY(-180deg)
            }
            
            .container:hover .flip {
                transform: rotateY(180deg);
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="flip">
                <div class="front">
                    <img src="img/area.png" />
                </div>
                <div class="back">
                    <img src="img/go.png" />
                </div>
            </div>
        </div>
    </body>

</html>