基於CSS3滑鼠經過立體翻轉切換特效

基於CSS3滑鼠經過立體翻轉切換特效。這是一款基於jQuery+CSS3實現的滑鼠經過封面和詳情3D翻轉切換特效。效果圖如下：

線上預覽    源碼下載

實現的代碼。

html代碼：

<div class="wrapbox YaHei">
        <div class="cont-box">
            <div class="regularly-box">
                <div class="regularly-head">
                    <strong>定期寶</strong><label>年利率：7%-18%</label>
                </div>
                <div class="regularly-contBody">
                    <ul class="regularly-item-list">
                        <li class="first viewport-flip">
                            <div class="flip-box flip out">
                                <dl class="flip-lists">
                                    <dd>
                                        <i class="hot"></i>
                                        <h3>這裡是項目名稱</h3>
                                        <div class="flip-itmes-info">
                                            <strong>10%</strong>
                                            <span class="to-day"><em>90</em>天</span>
                                            <div class="to-price">總金額：<label>888.00</label></div>
                                        </div>
                                        <div class="flip-itmes-ctrl">
                                            <div class="progress-info">
                                                <label class="fl">已完成</label>
                                                <div class="fl itmes-progress progress-tool" data="58"><span></span></div>
                                                <label"fl">58%</label>
                                            </div>
                                            <div class="itmes-btn-ctrl">
                                                <a href="#" class="hoverLink ctrl-btn">立即加入</a>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <h3>這裡是項目名稱</h3>
                                        <div class="flip-itmes-info">
                                            <strong>10%</strong>
                                            <span class="to-day"><em>90</em>天</span>
                                            <div class="to-price">總金額：<label>888.00</label></div>
                                        </div>
                                        <div class="flip-itmes-ctrl">
                                            <div class="progress-info">
                                                <label class="fl">已完成</label>
                                                <div class="fl itmes-progress progress-tool" data="100"><span></span></div>
                                                <label"fl">100%</label>
                                            </div>
                                            <div class="itmes-btn-ctrl">
                                                <span class="hoverLink ctrl-btn">搶光了</span>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <h3>這裡是項目名稱</h3>
                                        <div class="flip-itmes-info">
                                            <strong>10%</strong>
                                            <span class="to-day"><em>90</em>天</span>
                                            <div class="to-price">總金額：<label>888.00</label></div>
                                        </div>
                                        <div class="flip-itmes-ctrl">
                                            <div class="progress-info">
                                                <label class="fl">已完成</label>
                                                <div class="fl itmes-progress progress-tool" data="100"><span></span></div>
                                                <label"fl">100%</label>
                                            </div>
                                            <div class="itmes-btn-ctrl">
                                                <span class="hoverLink ctrl-btn">已完成</span>
                                            </div>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <div class="flip-box flip">
                                <div class="item-title">短期寶</div>
                                <div class="item-tx">項目期限：90-270天</div>
                                <div class="item-tx">年化利率：<label>9-12%</label></div>
                                <div class="flip-item-pic"><img src="images/df-item-pic-1.jpg" width="150" height="150"></div>
                                <div class="flip-foot">適合人群：有閑置資金的</div>
                            </div>
                        </li>
                        <li class="viewport-flip">
                            <div class="flip-box flip out">
                                <dl class="flip-lists">
                                    <dd>
                                        <i class="hot"></i>
                                        <h3>這裡是項目名稱</h3>
                                        <div class="flip-itmes-info">
                                            <strong>10%</strong>
                                            <span class="to-day"><em>90</em>天</span>
                                            <div class="to-price">總金額：<label>888.00</label></div>
                                        </div>
                                        <div class="flip-itmes-ctrl">
                                            <div class="progress-info">
                                                <label class="fl">已完成</label>
                                                <div class="fl itmes-progress progress-tool" data="58"><span></span></div>
                                                <label"fl">58%</label>
                                            </div>
                                            <div class="itmes-btn-ctrl">
                                                <a href="#" class="hoverLink ctrl-btn">立即加入</a>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <h3>這裡是項目名稱</h3>
                                        <div class="flip-itmes-info">
                                            <strong>10%</strong>
                                            <span class="to-day"><em>90</em>天</span>
                                            <div class="to-price">總金額：<label>888.00</label></div>
                                        </div>
                                        <div class="flip-itmes-ctrl">
                                            <div class="progress-info">
                                                <label class="fl">已完成</label>
                                                <div class="fl itmes-progress progress-tool" data="100"><span></span></div>
                                                <label"fl">100%</label>
                                            </div>
                                            <div class="itmes-btn-ctrl">
                                                <span class="hoverLink ctrl-btn">搶光了</span>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <h3>這裡是項目名稱</h3>
                                        <div class="flip-itmes-info">
                                            <strong>10%</strong>
                                            <span class="to-day"><em>90</em>天</span>
                                            <div class="to-price">總金額：<label>888.00</label></div>
                                        </div>
                                        <div class="flip-itmes-ctrl">
                                            <div class="progress-info">
                                                <label class="fl">已完成</label>
                                                <div class="fl itmes-progress progress-tool" data="100"><span></span></div>
                                                <label"fl">100%</label>
                                            </div>
                                            <div class="itmes-btn-ctrl">
                                                <span class="hoverLink ctrl-btn">已完成</span>
                                            </div>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <div class="flip-box flip">
                                <div class="item-title">中期寶</div>
                                <div class="item-tx">項目期限：90-270天</div>
                                <div class="item-tx">年化利率：<label>9-12%</label></div>
                                <div class="flip-item-pic"><img src="images/df-item-pic-2.jpg" width="150" height="150"></div>
                                <div class="flip-foot">適合人群：有閑置資金的</div>
                            </div>
                        </li>
                        <li class="last viewport-flip">
                            <div class="flip-box flip out">
                                <dl class="flip-lists">
                                    <dd>
                                        <i class="hot"></i>
                                        <h3>這裡是項目名稱</h3>
                                        <div class="flip-itmes-info">
                                            <strong>10%</strong>
                                            <span class="to-day"><em>90</em>天</span>
                                            <div class="to-price">總金額：<label>888.00</label></div>
                                        </div>
                                        <div class="flip-itmes-ctrl">
                                            <div class="progress-info">
                                                <label class="fl">已完成</label>
                                                <div class="fl itmes-progress progress-tool" data="58"><span></span></div>
                                                <label"fl">58%</label>
                                            </div>
                                            <div class="itmes-btn-ctrl">
                                                <a href="#" class="hoverLink ctrl-btn">立即加入</a>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <h3>這裡是項目名稱</h3>
                                        <div class="flip-itmes-info">
                                            <strong>10%</strong>
                                            <span class="to-day"><em>90</em>天</span>
                                            <div class="to-price">總金額：<label>888.00</label></div>
                                        </div>
                                        <div class="flip-itmes-ctrl">
                                            <div class="progress-info">
                                                <label class="fl">已完成</label>
                                                <div class="fl itmes-progress progress-tool" data="100"><span></span></div>
                                                <label"fl">100%</label>
                                            </div>
                                            <div class="itmes-btn-ctrl">
                                                <span class="hoverLink ctrl-btn">搶光了</span>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <h3>這裡是項目名稱</h3>
                                        <div class="flip-itmes-info">
                                            <strong>10%</strong>
                                            <span class="to-day"><em>90</em>天</span>
                                            <div class="to-price">總金額：<label>888.00</label></div>
                                        </div>
                                        <div class="flip-itmes-ctrl">
                                            <div class="progress-info">
                                                <label class="fl">已完成</label>
                                                <div class="fl itmes-progress progress-tool" data="100"><span></span></div>
                                                <label"fl">100%</label>
                                            </div>
                                            <div class="itmes-btn-ctrl">
                                                <span class="hoverLink ctrl-btn">已完成</span>
                                            </div>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <div class="flip-box flip">
                                <div class="item-title">長期寶</div>
                                <div class="item-tx">項目期限：90-270天</div>
                                <div class="item-tx">年化利率：<label>9-12%</label></div>
                                <div