问答: - 问答 - 第一PHP社区 php1.cn

问

发布于 1970-01-01 08:00

1 个回答

自己写了一个，不知道是否是你想要的效果。
IE10+ & Firefox 理论上可以， WebKit 浏览器请自觉脑补前缀。
由于纯 demo 用， JavaScript 写的很乱，不要怪我 QWQ
点开 Toggle move button 可以实现向左/右移动的效果。

<!DOCTYPE html>
<html>
<head>
    <title>Photo wall</title>
    <style>
        body {
            overflow: hidden;
        }

        body, input, button, select {
            font: 100% "segoe ui",sans-serif;
        }

        h1 {
            text-align: center;
            font: 100 250%/1.1 "Segoe UI",sans-serif;
            margin: 1em 0 0;
        }

        .container {
            height: 510px;
            position: relative;
            margin: 0 auto;
            width: 300px;
        }

        .column {
            transition: .5s;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .col-0 {
            transform: perspective(500px) translatez(645px) rotatey(60deg) translate3d(0,0,-1145px);
        }

        .col-1, .moved .col-0 {
            transform: perspective(500px) translatez(645px) rotatey(45deg) translate3d(0,0,-1145px);
        }

        .col-2, .moved .col-1 {
            transform: perspective(500px) translatez(645px) rotatey(30deg) translate3d(0,0,-1145px);
        }

        .col-3, .moved .col-2 {
            transform: perspective(500px) translatez(645px) rotatey(15deg) translate3d(0,0,-1145px);
        }

        .col-4, .moved .col-3 {
            transform: perspective(500px) translatez(645px) translate3d(0,0,-1145px);
        }

        .col-5, .moved .col-4 {
            transform: perspective(500px) translatez(645px) rotatey(-15deg) translate3d(0,0,-1145px);
        }

        .col-6, .moved .col-5 {
            transform: perspective(500px) translatez(645px) rotatey(-30deg) translate3d(0,0,-1145px);
        }

        .col-7, .moved .col-6 {
            transform: perspective(500px) translatez(645px) rotatey(-45deg) translate3d(0,0,-1145px);
        }

        .moved .col-7 {
            transform: perspective(500px) translatez(645px) rotatey(-60deg) translate3d(0,0,-1145px);
        }

        .column .image {
            background: #ccc;
            margin: 10px 5px;
            height: 160px;
        }

        .ui {
            text-align: center;
            margin-top: 0;
        }
    </style>
</head>
<body>
    <h1>Photo wall</h1>
    <p class="container">
        <p class="column col-0">
            <p class="image"></p>
            <p class="image"></p>
            <p class="image"></p>
        </p>
        <p class="column col-1">
            <p class="image"></p>
            <p class="image"></p>
            <p class="image"></p>
        </p>
        <p class="column col-2">
            <p class="image"></p>
            <p class="image"></p>
            <p class="image"></p>
        </p>
        <p class="column col-3">
            <p class="image"></p>
            <p class="image"></p>
            <p class="image"></p>
        </p>
        <p class="column col-4">
            <p class="image"></p>
            <p class="image"></p>
            <p class="image"></p>
        </p>
        <p class="column col-5">
            <p class="image"></p>
            <p class="image"></p>
            <p class="image"></p>
        </p>
        <p class="column col-6">
            <p class="image"></p>
            <p class="image"></p>
            <p class="image"></p>
        </p>
        <p class="column col-7">
            <p class="image"></p>
            <p class="image"></p>
            <p class="image"></p>
        </p>
    </p>
    <p class="ui"><button id="ToggleMove">Toggle move</button></p>
    <script>
        window.onload = function () {
            document.getElementById("ToggleMove").onclick = function () {
                if (!document.body.className) {
                    document.body.className = "moved";
                } else {
                    document.body.className = "";
                }
                return false;
            };
        };
    </script>
</body>
</html>

附一个截图:

觉得好用请好评哦

2022-11-23 00:12 回答

kafei

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签