js和css3局部3d幻灯片插件

这款s和css3局部3d幻灯片插件的灵感来自于Franklin Ta写的一篇文章，文章中他描述了如何使用脚本将嵌入在框架中的图形进行3d转换。

下面是第一个demo中如何在嵌入屏幕的手机界面中添加动画的css代码：

.mobile {
    overflow: hidden;
    position: absolute;
    z-index: 100;
    background: #333;
    width: 320px;
    height: 480px;
    top: 200px;
    left: 500px;
    outline: 1px solid transparent; /* For Firefox (jagged edges bug) */
    transform-origin: 0 0 0;
    transform: matrix3d(0.846234173238242, 0.251585817964749, 0, 0.000085171934399447, -0.115203182108559, 0.800700357116676, 0, -0.000214263459947427, 0, 0, 1, 0, 23, 14, 0, 1);
}
                

例子demo中是简单的幻灯片，使用CSS animations来显示和隐藏图片，你可以自定义一些幻灯片过渡效果，例如使用Daniel Eden的animate.css。

下面是例子1中幻灯片自定义动画的代码：

.slideshow {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    list-style-type: none;
}

.slideshow__item {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    transform: translate3d(-100%, 0, 0);
}

.slideshow__item.current{
    pointer-events: auto;
    z-index: 100;
    transform: translate3d(0, 0, 0);
}

.slideshow img {
    width: 100%;
}
                

demo2中使用了animation ，它的代码如下：

.slideshow__item.in--next {
    animation: inNext 0.5s forwards;
}

.slideshow__item.out--next {
    animation: outNext 0.5s forwards;
}

.slideshow__item.in--prev {
    animation: inPrev 0.5s forwards;
}

.slideshow__item.out--prev {
    animation: outPrev 0.5s forwards;
}

@keyframes inPrev {
    0% {
        transform: translate3d(0, 100%, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes inNext {
    0% {
        transform: scale3d(0.5, 0.5, 1);
    }
    100% {
        transform: none;
    }
}

@keyframes outPrev {
    100% {
        transform: scale3d(0.5, 0.5, 1);
    }
}

@keyframes outNext {
    100% {
        transform: translate3d(0, 100%, 0);
    }
}
                

下面是所有4个效果的截图：