响应式多画面（面板）布局

Responsive 3D Panel Layout 屏幕画面被分成网格状的子画面。切换时有画面三维弯曲的入场效果。

模板，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2058
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

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

<body>
    <div class="container">
        <ul id="sg-panel-container">
            <li data-w="60" data-h="55">
                <img title="Grexit" src="https://tympanus.net/Development/3DPanelLayout/images/1.jpg" data-rotate-x="50" />
                <img title="Godwottery" src="https://tympanus.net/Development/3DPanelLayout/images/2.jpg" data-rotate-y="-50" />
                <img title="Somniloquent" src="https://tympanus.net/Development/3DPanelLayout/images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
                <div data-translate-z="-500">
                    <div class="sg-content">
                        <h3>Responsive 3D Panel Layout</h3>
                        <p>Best viewed in WebKit browsers</p>
                    </div>
                </div>
            </li>
            <li data-w="100" data-h="40">
                <img title="Grexit" src="https://tympanus.net/Development/3DPanelLayout/images/5.jpg" data-rotate-x="50" />
                <img title="Godwottery" src="https://tympanus.net/Development/3DPanelLayout/images/6.jpg" data-rotate-y="-50" />
            </li>
            <li data-w="35" data-h="65">
                <img title="Etiquette" src="https://tympanus.net/Development/3DPanelLayout/images/1.jpg" data-translate-x="-300" />
                <img title="Somniloquent" src="https://tympanus.net/Development/3DPanelLayout/images/4.jpg" data-translate-y="300" />
                <img title="Godwottery" src="https://tympanus.net/Development/3DPanelLayout/images/8.jpg" data-translate-y="300" />
                <img title="Grexit" src="https://tympanus.net/Development/3DPanelLayout/images/3.jpg" data-translate-x="300" />
            </li>
            <li data-w="60" data-h="55">
                <img title="Grexit" src="https://tympanus.net/Development/3DPanelLayout/images/8.jpg" data-rotate-x="50" />
                <img title="Godwottery" src="https://tympanus.net/Development/3DPanelLayout/images/4.jpg" data-rotate-y="-50" />
                <div>
                    <div class="sg-content">
                        <h3>Proinde vos postulo</h3>
                        <p>Veggies sunt bona vobis, proinde vos postulo esse magis amaranth gram radish garlic parsley napa cabbage.</p>
                    </div>
                </div>
                <img title="Somniloquent" src="https://tympanus.net/Development/3DPanelLayout/images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
            </li>
            <li data-w="40" data-h="100">
                <img title="Grexit" src="https://tympanus.net/Development/3DPanelLayout/images/1.jpg" data-rotate-x="50" />
                <img title="Godwottery" src="https://tympanus.net/Development/3DPanelLayout/images/2.jpg" data-rotate-x="50" data-translate-z="-700" />
            </li>
            <li data-w="30" data-h="100">
                <img title="Grexit" src="https://tympanus.net/Development/3DPanelLayout/images/7.jpg" data-rotate-x="50" />
                <div data-rotate-y="50">
                    <div class="sg-content">
                        <h3>Beet greens tigernut</h3>
                        <p>Beet greens tigernut prairie turnip broccoli rabe cabbage tomato sea lettuce garlic chicory earthnut pea pea celery summer purslane bell pepper amaranth kale. Bok choy broccoli arugula turnip greens seakale welsh onion okra cauliflower
                            artichoke coriander. Courgette bok choy salad soybean salsify pea sprouts sorrel pea.</p>
                        <p>Lettuce tomato celery lotus root water chestnut salad silver beet beet greens coriander salsify pea sprouts corn. Dulse endive lentil asparagus dulse groundnut prairie turnip wakame bush tomato cauliflower salsify sierra leone
                            bologi melon azuki bean beetroot. Squash scallion dulse bok choy spinach cress parsley winter purslane garlic kakadu plum gumbo watercress jícama mung bean carrot eggplant. Tomato beet greens celtuce tomatillo chickweed welsh
                            onion peanut dandelion pea sprouts avocado potato okra salsify komatsuna turnip greens. Gourd swiss chard sea lettuce sorrel pumpkin chickweed fava bean tomato daikon taro.</p>
                        <p>Broccoli rabe gumbo lentil spring onion gourd mustard dulse tomatillo pea sprouts wakame daikon squash courgette komatsuna soybean melon arugula napa cabbage. Squash taro soybean bunya nuts gourd garlic arugula beet greens leek
                            nori celtuce okra maize kohlrabi mustard. Fennel pumpkin grape courgette bitterleaf cabbage silver beet lotus root shallot eggplant.</p>
                        <p>Chard spinach dulse celery green bean bunya nuts broccoli tomatillo tomato watercress broccoli rabe. Corn summer purslane garlic lettuce brussels sprout chickweed bell pepper bamboo shoot maize winter purslane broccoli rabe coriander
                            daikon chickpea cucumber. Napa cabbage radicchio bamboo shoot tomatillo asparagus bush tomato avocado coriander kale turnip greens nori catsear. Cress wattle seed broccoli rabe mung bean groundnut radicchio dulse kombu azuki
                            bean spring onion. Yarrow dandelion rutabaga bok choy broccoli bell pepper artichoke caulie pea sprouts bitterleaf beetroot tigernut desert raisin kohlrabi sweet pepper turnip greens avocado.</p>
                        <p>Gumbo water chestnut maize ricebean spring onion wakame black-eyed pea squash cress celery. Ricebean zucchini spinach beetroot black-eyed pea kakadu plum artichoke broccoli dulse burdock pumpkin onion kale caulie amaranth. Garbanzo
                            squash parsley taro shallot bamboo shoot salad bush tomato kohlrabi napa cabbage black-eyed pea broccoli rabe burdock.</p>
                    </div>
                </div>
            </li>
            <li data-w="100" data-h="100">
                <img title="Grexit" src="https://tympanus.net/Development/3DPanelLayout/images/3.jpg" data-rotate-y="50" data-translate-z="-1700" />
            </li>
            <li data-w="50" data-h="50">
                <img title="Grexit" src="https://tympanus.net/Development/3DPanelLayout/images/1.jpg" data-translate-z="250" />
                <img title="Godwottery" src="https://tympanus.net/Development/3DPanelLayout/images/2.jpg" data-translate-z="250" />
                <img title="Somniloquent" src="https://tympanus.net/Development/3DPanelLayout/images/3.jpg" data-translate-z="250" />
                <img title="Etiquette" src="https://tympanus.net/Development/3DPanelLayout/images/4.jpg" data-translate-z="250" />
            </li>
            <li data-w="100" data-h="40">
                <div>
                    <div class="sg-content sg-columns">
                        <h3>Parsley sorrel dulse</h3>
                        <p>Parsley sorrel dulse seakale turnip greens summer purslane. Celery celery rock melon quandong collard greens gourd gram turnip fennel mung bean courgette lotus root azuki bean. </p>
                        <p>Turnip greens arugula garlic shallot grape tomato tomatillo celtuce gumbo water chestnut lettuce groundnut dandelion horseradish pea turnip greens gourd burdock. Horseradish rock melon scallion bamboo shoot earthnut pea fennel
                            parsley garlic summer purslane onion nori pea caulie ricebean mustard leek. Leek fennel cucumber green bean gourd desert raisin rock melon maize turnip greens beet greens caulie celtuce welsh onion parsnip kohlrabi dulse grape.
                            Caulie spinach bitterleaf wakame parsley salad pea. Bush tomato lettuce chickpea horseradish kombu parsley sorrel grape okra celery daikon chicory beetroot plantain welsh onion mustard radicchio yarrow.</p>
                        <p>Okra catsear scallion cabbage salad garbanzo. Pea sprouts kombu scallion grape dulse endive bamboo shoot bell pepper komatsuna okra jícama collard greens. Ricebean cress peanut onion bush tomato gourd scallion artichoke zucchini
                            squash corn.</p>
                    </div>
                </div>
                <img title="Godwottery" src="https://tympanus.net/Development/3DPanelLayout/images/5.jpg" data-rotate-y="-50" />
            </li>
            <li data-w="100" data-h="100">
                <img title="Grexit" src="https://tympanus.net/Development/3DPanelLayout/images/1.jpg" data-rotate-z="20" data-translate-z="700" />
            </li>
            <li data-w="50" data-h="50">
                <img title="Grexit" src="https://tympanus.net/Development/3DPanelLayout/images/6.jpg" data-rotate-y="90" data-translate-z="-700" />
                <div data-rotate-y="50">
                    <div class="sg-content">
                        <h3>Chicory corn cauliflower</h3>
                        <p>Yarrow radicchio wattle seed peanut chicory corn cauliflower kakadu plum kale grape. Celtuce prairie turnip burdock rutabaga bok choy cress swiss chard peanut bitterleaf caulie seakale bush tomato. </p>
                    </div>
                </div>
                <div data-rotate-y="50">
                    <div class="sg-content">
                        <h3>Chard turnip greens</h3>
                        <p>Salsify spinach endive parsley lentil jícama avocado rock melon azuki bean melon kale onion grape welsh onion plantain yarrow. Peanut pea sprouts watercress celtuce maize chard turnip greens spinach seakale cabbage pumpkin.</p>
                    </div>
                </div>
                <img title="Somniloquent" src="https://tympanus.net/Development/3DPanelLayout/images/3.jpg" data-rotate-y="-90" data-translate-z="-700" />
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="/uploads/160101/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Development/3DPanelLayout/js/jquery.transit.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Development/3DPanelLayout/js/jquery.imagesloaded.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Development/3DPanelLayout/js/jquery.ba-dotimeout.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Development/3DPanelLayout/js/jquery.gridgallery.js"></script>
    <script type="text/javascript">
        $(function() {

$('#sg-panel-container').gridgallery();

});
    </script>
</body>

</html>

Responsive 3D Panel Layout 屏幕画面被分成网格状的子画面。切换时有画面三维弯曲的入场效果。

模板，教程

编辑器支持Emmet

快捷键

Responsive 3D Panel Layout 屏幕画面被分成网格状的子画面。切换时有画面三维弯曲的入场效果。

模板，教程

使用纯CSS实现的响应式平滑滚动页面布局

如何创建移动友好的响应式水平布局

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：