jQuery和css3超酷三面折纸3D幻灯片插件

这个插件是一款jQuery和css3超酷三面折纸3D幻灯片插件。插件中使用了CSS 3D Transforms、透视和CSS Transitions。

插件中精美的卡片插图来自于花瓣-发现、采集你喜欢的一切。

HTML

该3d幻灯片插件的初始html结构如下：使用一个div包含两个figures，每个figures中包含一张图片和一个包含了图片标题和描述的figcaption

<div class="fs-slider" id="fs-slider">
    <figure>
        <img src="images/1.jpg" alt="image01" />
        <figcaption>
            <h3>Eloquence</h3>
            <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
        </figcaption>
    </figure>

    <figure>
        <img src="images/2.jpg" alt="image02" />
        <figcaption>
            <h3>Quintessential</h3>
            <p>Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag. </p>
        </figcaption>
    </figure>
    <!-- ... -->
</div>
                

在插件运行时，我们需要使用jQuery将html结构改为如下：

<section class="fs-container">
    <div class="fs-wrapper">
        <div class="fs-slider" id="fs-slider">
            <div class="fs-block">

                <figure style="display: block; ">
                    <img src="images/1.jpg" alt="image01" />
                    <figcaption>
                        <h3>Eloquence</h3>
                        <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
                    </figcaption>
                </figure>

            </div><!-- /fs-block -->

            <div class="fs-block">
                <!-- ... -->
            </div>
            <!-- ... -->
        </div><!-- /fs-slider -->
        <nav class="fs-navigation">
            <span>Previous</span>
            <span>Next</span>
        </nav>
    </div><!-- /fs-wrapper -->
</section><!-- /fs-container -->
                

每一个figure都被包装到class为fs-block的div中。

css代码和js代码请参考下载文件。