基于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 class="flip-item-pic"><img src="images/df-item-pic-3.jpg" width="150" height="150"></div>
                                <div class="flip-foot">适合人群：有闲置资金的</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--End 定期宝-->
    </div>

via：http://www.w2bc.com/article/85794