模拟斜靠在沙发上手机里的自动轮播幻灯片

Perspective Mockup 3D Slideshow 使用CSS3 3D TRANSFORMS和JS计算实现。本例的核心是id为mobile的div，该div实现了3d的图片轮播，通过计算刚好适配到背景图片的空白手机中。

模板，教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

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

</head>

<body class="demo-1">
    <div class="container">
        <div id="wrap" class="wrap">
            <div class="mockup">
                <img class="mockup__img" src="https://tympanus.net/Development/MockupSlideshow/img/mockup.jpg" />
                <div id="mobile" class="mobile">
                    <ul id="slideshow" class="slideshow">
                        <li class="slideshow__item"><img src="https://tympanus.net/Development/MockupSlideshow/img/small/1.png" />
                        </li>
                        <li class="slideshow__item"><img src="https://tympanus.net/Development/MockupSlideshow/img/small/2.png" />
                        </li>
                        <li class="slideshow__item"><img src="https://tympanus.net/Development/MockupSlideshow/img/small/3.png" />
                        </li>
                        <li class="slideshow__item"><img src="https://tympanus.net/Development/MockupSlideshow/img/small/4.png" />
                        </li>
                    </ul>
                </div>
                <header class="codrops-header">
                    <h1><span>Mockup</span> Slideshow <i>An animated perspective mockup with 3D transforms computed with <a href="https://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/">Franklin Ta's helper script</a></i></h1>
                </header>
            </div>
        </div>
    </div>
    
    <script src="https://tympanus.net/Development/MockupSlideshow/js/classie.js"></script>
    <script src="https://tympanus.net/Development/MockupSlideshow/js/main.js"></script>
    <script>
        (function() {
            new Slideshow(document.getElementById('slideshow'));

/* Mockup responsiveness */
            var body = docElem = window.document.documentElement,
                wrap = document.getElementById('wrap'),
                mockup = wrap.querySelector('.mockup'),
                mockupWidth = mockup.offsetWidth;

scaleMockup();

function scaleMockup() {
                var wrapWidth = wrap.offsetWidth,
                    val = wrapWidth / mockupWidth;

mockup.style.transform = 'scale3d(' + val + ', ' + val + ', 1)';
                mockup.style.WebkitTransform = 'scale3d(' + val + ', ' + val + ', 1)';
            }

window.addEventListener('resize', resizeHandler);

function resize() {
                scaleMockup();
            }
        })();
    </script>

</body>

</html>

Perspective Mockup 3D Slideshow 使用CSS3 3D TRANSFORMS和JS计算实现。本例的核心是id为mobile的div，该div实现了3d的图片轮播，通过计算刚好适配到背景图片的空白手机中。

模板，教程

编辑器支持Emmet

快捷键

Perspective Mockup 3D Slideshow 使用CSS3 3D TRANSFORMS和JS计算实现。 本例的核心是id为mobile的div，该div实现了3d的图片轮播，通过计算刚好适配到背景图片的空白手机中。

模板，教程

使用CSS3实现带视差背景的平滑图片轮播幻灯片

弹性缩略图动效的图片轮播动画/相册

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Perspective Mockup 3D Slideshow 使用CSS3 3D TRANSFORMS和JS计算实现。本例的核心是id为mobile的div，该div实现了3d的图片轮播，通过计算刚好适配到背景图片的空白手机中。