基于CSS3鼠标经过立体翻转切换特效_html/css_WEB-ITnose

基于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"    style="max-width:90%"  style="max-width:90%" alt="基于CSS3鼠标经过立体翻转切换特效_html/css_WEB-ITnose" ></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"    style="max-width:90%"  style="max-width:90%" alt="基于CSS3鼠标经过立体翻转切换特效_html/css_WEB-ITnose" ></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"    style="max-width:90%"  style="max-width:90%" alt="基于CSS3鼠标经过立体翻转切换特效_html/css_WEB-ITnose" ></div>                                <div class="flip-foot">适合人群：有闲置资金的</div>                            </div>                        </li>                    </ul>                </div>            </div>        </div>        <!--End 定期宝-->    </div>

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