正反两面的盒子内容切换旋转 js原生动画效果

正反两面的盒子内容切换旋转
<!doctype html>
<html ng-app="invoice2">

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .ul {
            margin-top: 100px;
            margin-left: 200px;
        }
        .back {
            background: #fff;
            width: 182px;
            height: 81px;
            transform: rotateY(180deg);
            transition: all 1s;
            text-align: center;
            opacity: 0;
            margin-top: -103px;
            margin-bottom: 22px;
            box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.17);
        }
        .company-logo-box{
            width: 182px;
            height: 81px;
            display: inline-block;
        }
        .company-logo-box:hover .front {
            opacity: 0;
            transform: rotateY(180deg);
            transition: all 1s;
        }

        .company-logo-box:hover .back {
            opacity: 1;
            z-index: 2;
            transform: rotateY(360deg);
            transition: all 1s;
        }

        .back span {
            display: inline-block;
            line-height: 81px;
            font-size: 20px;
            width: 162px;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
        }

        .logo-box {
            background: #fff;
            width: 182px;
            height: 81px;
            margin-bottom: 22px;
            box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.17);
            transform: rotateY(0deg);
            transition: all 1s;
        }

        .logo-box img {
            width: 100%;
        }
    </style>
</head>
<body>
    <ul class="ul">
        <li class="company-logo-box">
            <div class="front logo-box">
                <div class="box">
                    <img src="./logo/ANNU.jpg" />
                </div>
            </div>
            <div class="back">
                <span>8船期</span>
            </div>
        </li>
        <li class="company-logo-box">
            <div class="front logo-box">
                <div class="box">
                    <img src="./logo/APLU.jpg" />
                </div>
            </div>
            <div class="back">
                <span>88船期</span>
            </div>
        </li>
        <li class="company-logo-box">
            <div class="front logo-box">
                <div class="box">
                    <img src="./logo/ASLE.jpg" />
                </div>
            </div>
            <div class="back">
                <span>888船期</span>
            </div>
        </li>
        <li class="company-logo-box">
            <div class="front logo-box">
                <div class="box">
                    <img src="./logo/CMDU.jpg" />
                </div>
            </div>
            <div class="back">
                <span>8888船期</span>
            </div>
        </li>
    </ul>
    <script>
    </script>
</body>

</html>
who_become_gods
发布了17 篇原创文章 · 获赞 0 · 访问量 200
私信关注
正反两面的盒子内容切换旋转 js原生动画效果

猜你喜欢
