如何实现类似这种的照片墙_Html5_论坛

如何实现类似这种的照片墙

so***t0 分类：Html5 人气：1160 回帖：1 发布于6年前收藏

我想到的是使用css3的perspective属性进行Y轴倾斜，但是这样做不到左右移动的效果。不知道有没有更好的方法或者插件。
原地址：http://sucai.epweike.com/js/texiao/tupian/1003.html

讨论这个帖子（1）垃圾回帖将一律封号处理……

Lv5 码农

sn***12 PHP开发工程师 6年前#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>
    <div class="container">
        <div class="column col-0">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
        <div class="column col-1">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
        <div class="column col-2">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
        <div class="column col-3">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
        <div class="column col-4">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
        <div class="column col-5">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
        <div class="column col-6">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
        <div class="column col-7">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
    </div>
    <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>

附一个截图:

觉得好用请好评哦

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取