使用CSS3 3D变换（transforms）实现的3D画册/相册/作品展览

3D Gallery with CSS3 and jQuery 点击图片下面的左右箭头，可以3D画室的风格浏览作品。

模板，教程

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

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

<body>
    <div class="container">
        <header>
            <h1>3D Gallery <span>with CSS3 &amp; jQuery</span></h1>
        </header>
        <section id="dg-container" class="dg-container">
            <div class="dg-wrapper">
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/1.jpg" alt="image01">
                    <div>https://www.colazionedamichy.it/</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/2.jpg" alt="image02">
                    <div>https://www.percivalclo.com/</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/3.jpg" alt="image03">
                    <div>https://www.wanda.net/fr</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/4.jpg" alt="image04">
                    <div>https://lifeingreenville.com/</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/5.jpg" alt="image05">
                    <div>https://circlemeetups.com/</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/6.jpg" alt="image06">
                    <div>https://www.castirondesign.com/</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/7.jpg" alt="image07">
                    <div>https://www.foundrycollective.com/</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/8.jpg" alt="image08">
                    <div>https://www.mathiassterner.com/home</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/9.jpg" alt="image09">
                    <div>https://learnlakenona.com/</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/10.jpg" alt="image10">
                    <div>https://www.neighborhood-studio.com/</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/11.jpg" alt="image11">
                    <div>https://www.beckindesign.com/</div>
                </a>
                <a href="#"><img src="https://tympanus.net/Development/3DGallery/images/12.jpg" alt="image12">
                    <div>https://kicksend.com/</div>
                </a>
            </div>
            <nav>
                <span class="dg-prev">&lt;</span>
                <span class="dg-next">&gt;</span>
            </nav>
        </section>
    </div>
    <script type="text/javascript" src="/uploads/160101/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Development/3DGallery/js/jquery.gallery.js"></script>
        
        </body>
    </html>

3D Gallery with CSS3 and jQuery 点击图片下面的左右箭头，可以3D画室的风格浏览作品。

模板，教程

编辑器支持Emmet

快捷键

3D Gallery with CSS3 and jQuery 点击图片下面的左右箭头，可以3D画室的风格浏览作品。

模板，教程

使用CSS3 transforms和jQuery实现图片悬停时的3D折叠动效

使用CSS clip和transition实现可扩展浮层效果（带斜向掉落动画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：