master

分支 (1)

管理

管理

master

gitee-demo03
/
test.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            vertical-align: bottom;
        }

        li {
            list-style: none;
        }

        body {
            /* 透视属性 */
            perspective: 800px;
            background: url(./images/guide-bg2.jpg) no-repeat;
            background-size: 100% 100%;
        }

        .box {
            width: 1200px;
            height: 420px;
            /* border:1px solid red; */
            margin: 200px auto;
            box-sizing: border-box;
            position: relative;
        }

        .box ul {
            height: 380px;
        }

        .box ul li {
            width: 200px;
            height: 380px;

        }

        .box ul li {
            position: absolute;
        }

        .box ul li:nth-child(1) {
            left: 0;
        }

        .box ul li:nth-child(2) {
            left: 20%;
            top: 50px;
        }

        .box ul li:nth-child(3) {
            left: 40%;
        }

        .box ul li:nth-child(4) {
            left: 60%;
            top: 50px;
        }

        .box ul li:nth-child(5) {
            left: 80%;
        }

        .box ul li img {
            position: absolute;
        }

        .box ul li img.front {
            /* 过渡属性 */
            transition: transform 1s;
            z-index: 1000;
        }

        .box ul li img.back {
            transition: transform 1s;
            transform: rotateY(-180deg);
        }

        .box ul li:hover .front {
            transform: rotateY(180deg);
            backface-visibility: hidden;
        }

        .box ul li:hover .back {
            transform: rotateY(0deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="images/card6-back.png" class="back" />
                <img src="images/card6.png" class="front" />
            </li>
            <li>
                <img src="images/card7.png" class="front" /><img src="images/card7-back.png" class="back" />
            </li>
            <li>
                <img src="images/card8.png" class="front" /><img src="images/card8-back.png" class="back" />
            </li>
            <li>
                <img src="images/card9.png" class="front" /><img src="images/card9-back.png" class="back" />
            </li>
            <li>
                <img src="images/card10.png" class="front" /><img src="images/card10-back.png" class="back" />
            </li>
        </ul>
    </div>
</body>

</html>