HTML5 很棒的交互式家居装修展览和情景购物

典型的情境式购物应用，包含4种场景，厨房、卧室、客厅和洗手间： 1.可以在一个实际的交互式场景中体验家居用品（家具）所带来的效果； 2.选中某个家具后，突显放大显示详细商品信息，并可以加入购物车完成购买。如果结合虚拟现实的一些技术，可以更好的提升用户现场体验。也许不久的未来线下的体验完全可以通过线上来感受。

教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

</head>

<body>
    <header class="codrops-header">
        <h1>在线3D家居展览</h1>
    </header>
    <p class="info info--size">请在全屏模式（<i class="fa fa-expand"></i>）下观摩3D展示效果。</p>
    <p class="info info--support">Your browser does not support preserve-3d!</p>
    <div id="slideshow" class="slideshow">
        <div class="slide">
            <div class="scene">
                <div class="views">
                    <div class="view">
                        <img class="view__img" src="https://wow.techbrood.com/uploads/151101/room/bedroom/a.jpg" alt="Side" />
                        <div class="item item--horse">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/bedroom/horse.jpg" alt="Horse" data-transform-z="60" />
                            <div class="item__info">
                                <h3 class="item__title">Deco Horse</h3>
                                <div class="item__price"><sup>$</sup>59</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                    </div>
                    <div class="view view--rotate view--rotate-left">
                        <img class="view__img" src="https://wow.techbrood.com/uploads/151101/room/bedroom/b.jpg" alt="Front" />
                        <div class="item item--blanket">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/bedroom/blanket.jpg" alt="Blanket" data-transform-z="90" />
                            <div class="item__info">
                                <h3 class="item__title">Blanket</h3>
                                <div class="item__price"><sup>$</sup>129</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                        <div class="item item--picture">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/bedroom/picture.jpg" alt="Picture" data-transform-z="80" />
                            <div class="item__info">
                                <h3 class="item__title">Golden Frame</h3>
                                <div class="item__price"><sup>$</sup>39</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="scene">
                <div class="views">
                    <div class="view view--rotate view--rotate-right">
                        <img class="view__img" src="https://wow.techbrood.com/uploads/151101/room/living/a.jpg" alt="Front" />
                        <div class="item item--pillow">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/living/pillow.jpg" alt="Vase" data-transform-z="60" />
                            <div class="item__info">
                                <h3 class="item__title">Deco Pillow</h3>
                                <div class="item__price"><sup>$</sup>29</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                        <div class="item item--lamp">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/living/lamp.jpg" alt="Lamp" data-transform-z="60" />
                            <div class="item__info">
                                <h3 class="item__title">Swedish Lamp</h3>
                                <div class="item__price"><sup>$</sup>89</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                        <div class="item item--silvervase">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/living/silvervase.jpg" alt="Silver Vase" data-transform-z="60" />
                            <div class="item__info">
                                <h3 class="item__title">Silver Vase</h3>
                                <div class="item__price"><sup>$</sup>49</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                    </div>
                    <div class="view">
                        <img class="view__img" src="https://wow.techbrood.com/uploads/151101/room/living/b.jpg" alt="Side" />
                    </div>
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="scene">
                <div class="views">
                    <div class="view">
                        <img class="view__img" src="https://wow.techbrood.com/uploads/151101/room/kitchen/a.jpg" alt="Side" />
                        <div class="item item--shakers">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/kitchen/shakers.jpg" alt="Shakers" data-transform-z="80" />
                            <div class="item__info">
                                <h3 class="item__title">Shaker Set</h3>
                                <div class="item__price"><sup>$</sup>59</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                        <div class="item item--coffeemachine">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/kitchen/coffeemachine.jpg" alt="Coffee Machine" data-transform-z="60" />
                            <div class="item__info">
                                <h3 class="item__title">Coffee Machine</h3>
                                <div class="item__price"><sup>$</sup>149</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                    </div>
                    <div class="view view--rotate view--rotate-left">
                        <img class="view__img" src="https://wow.techbrood.com/uploads/151101/room/kitchen/b.jpg" alt="Front" />
                        <div class="item item--bowls">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/kitchen/bowlset.jpg" alt="Bowl Set" data-transform-z="40" />
                            <div class="item__info">
                                <h3 class="item__title">Bowl Set</h3>
                                <div class="item__price"><sup>$</sup>49</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="scene">
                <div class="views">
                    <div class="view">
                        <img class="view__img" src="https://wow.techbrood.com/uploads/151101/room/bathroom/a.jpg" alt="Side" />
                    </div>
                    <div class="view">
                        <img class="view__img" src="https://wow.techbrood.com/uploads/151101/room/bathroom/b.jpg" alt="Front" />
                        <div class="item item--sink">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/bathroom/sink.jpg" alt="Sink" data-transform-z="40" />
                            <div class="item__info">
                                <h3 class="item__title">Grohe Sink</h3>
                                <div class="item__price"><sup>$</sup>399</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                        <div class="item item--pillows">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/bathroom/pillows.jpg" alt="Pillows" data-transform-z="70" />
                            <div class="item__info">
                                <h3 class="item__title">Pillow Set</h3>
                                <div class="item__price"><sup>$</sup>69</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                    </div>
                    <div class="view view--rotate view--rotate-left">
                        <img class="view__img" src="https://wow.techbrood.com/uploads/151101/room/bathroom/c.jpg" alt="Front" />
                        <div class="item item--bidet">
                            <img class="item__img" src="https://wow.techbrood.com/uploads/151101/room/bathroom/bidet.jpg" alt="Bidet" data-transform-z="90" />
                            <div class="item__info">
                                <h3 class="item__title">Grohe Bidet</h3>
                                <div class="item__price"><sup>$</sup>259</div>
                                <button class="button button--buy"><i class="icon icon--shopping-cart"></i><span class="text-hidden">Add to cart</span>
                                </button>
                            </div>
                            <button class="button button--close"><i class="icon icon--close"></i><span class="text-hidden">Close</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <nav class="nav">
            <a href="#" class="nav__item"><span class="text-hidden">The Master Bedroom</span></a>
            <a href="#" class="nav__item"><span class="text-hidden">The Dining Room</span></a>
            <a href="#" class="nav__item"><span class="text-hidden">The Bathroom</span></a>
            <a href="#" class="nav__item"><span class="text-hidden">The Office</span></a>
        </nav>
        <div class="titles">
            <h2 class="title">The Bedroom <span class="title__sub">Relax</span></h2>
            <h2 class="title">The Living Room <span class="title__sub">Socialize</span></h2>
            <h2 class="title">The Kitchen <span class="title__sub">Create</span></h2>
            <h2 class="title">The Bathroom <span class="title__sub">Refresh</span></h2>
        </div>
    </div>
    
    <script src="https://wow.techbrood.com/uploads/151001/classie.js"></script>
    <script src="https://wow.techbrood.com/uploads/151101/modernizr-custom.js"></script>
    <script src="https://wow.techbrood.com/uploads/151101/room-demo.js"></script>
    <script>
        (function() {
            var slideshow = new Slideshow(document.getElementById('slideshow'));
        })();
    </script>
</body>

</html>

教程

编辑器支持Emmet

快捷键

教程

HTML5 CSS3如何制作带内容预览和运动悬停动效的网格布局

HTML5 SVG 低多边形在线动物展+栩栩如生的动物肖像

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：