CSS旋转效果

最新推荐文章于 2025-03-15 09:04:45 发布

姑苏流白

最新推荐文章于 2025-03-15 09:04:45 发布

阅读量612

点赞数

分类专栏：网站开发文章标签： css 旋转效果

本文链接：https://blog.youkuaiyun.com/AnonymKing/article/details/85338016

版权

网站开发专栏收录该内容

9 篇文章

订阅专栏

0x00 预期效果

效果如下

0x01 代码实现

思想也比较简单，主要一个特点是监听父容器的事件来决定子容器的状态，这样可以消除抖动的问题；其他的我就不多说了，代码比较简单，大家直接看代码吧。
代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS旋转效果</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        /*设置外中内三层div的大小一致*/
        .container, .item, .page {
            width: 320px;
            height: 180px;
            line-height: 180px;
            text-align: center;
            font-size: 24px;
        }

        .item {
            /*设置中间层旋转时的动画效果*/
            transition: all .4s ease;
        }

        .page {
            /*配合旋转动画*/
            transition: .4s;
            background-color: goldenrod;
            box-shadow: 4px 2px 4px #999;
        }

        .front {
            opacity: 1;
        }

        .back {
            /*设置位置与正面重合*/
            position: absolute;
            top: 0;
            left: 0;
            /*设置透明 预先旋转180deg*/
            opacity: 0;
            transform: rotateY(180deg);
        }

        .container:hover .item{
            transform: rotateY(180deg);
        }

        .container:hover .front{
            opacity: 0;
        }

        .container:hover .back{
            opacity: 1;
        }
    </style>
    <link rel="manifest" href="./static/manifest.json" />
    <script src="./static/js/sw-server.js"></script>
</head>
<body>

<div class="container">
    <div class="item">
        <div class="page front">这是正面</div>
        <div class="page back">这是反面</div>
    </div>
</div>
</body>
</html>