純css3 3D圖片立方體旋轉動畫特效

本文轉載自查看原文 2016-07-20 09:25 4151 CSS/ HTML5/ CSS/HTML/ CSS3

純css3 3D立方體模塊，鼠標觸碰，模塊炸開，大立方體中套小立方體

效果展示

手機掃描二維碼體驗效果：

效果圖如下：

源碼下載：http://hovertree.com/h/bjaf/0qmul8gc.htm

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css-3d旋轉相冊_何問起</title><base target="_blank" />
    <link rel="stylesheet" href="http://hovertree.com/texiao/css3/34/hovertree.css" />
</head>
<body>
    <div class="hovertreeinfo">
    <h2>何問起css-3d旋轉相冊</h2>請把光標移到立方體上面，或者點擊圖片。<input type="button" value="還原" /></div>
    <!--/*外層最大容器*/-->
    <div class="wrap">
        <!--    /*包裹所有元素的容器*/-->
        <div class="cube">
            <!--前面圖片 -->
            <div class="out_front">
                <img src="http://hovertree.com/hvtimg/bjafjg/p1n3aebo.jpg" class="pic" />
            </div>
            <!--后面圖片 -->
            <div class="out_back">
                <img src="http://hovertree.com/hvtimg/bjafjg/6omilcpi.png" class="pic" />
            </div>
            <!--左圖片 -->
            <div class="out_left">
                <img src="http://hovertree.com/hvtimg/bjafjg/7ciu9jqt.jpg" class="pic" />
            </div>
            <div class="out_right">
                <img src="http://hovertree.com/hvtimg/bjafjg/x9h3ho61.jpg" class="pic" />
            </div>
            <div class="out_top">
                <img src="http://hovertree.com/hvtimg/bjafjg/1rysrqvg.jpg" class="pic" />
            </div>
            <div class="out_bottom">
                <img src="http://hovertree.com/hvtimg/bjafjg/nre7yne5.jpg" class="pic" />
            </div>
            <!--小正方體 -->
            <span class="in_front">
                <img src="http://hovertree.com/hvtimg/bjafjg/wctv4yie.jpg" class="in_pic" />
            </span>
            <span class="in_back">
                <img src="http://hovertree.com/hvtimg/bjafjg/d1w0ani7.jpg" class="in_pic" />
            </span>
            <span class="in_left">
                <img src="http://hovertree.com/hvtimg/bjafjg/dys40n99.jpg" class="in_pic" />
            </span>
            <span class="in_right">
                <img src="http://hovertree.com/hvtimg/bjafjg/6sqnrrgc.jpg" class="in_pic" />
            </span>
            <span class="in_top">
                <img src="http://hovertree.com/hvtimg/bjafjg/o73nrdo4.jpg" class="in_pic" />
            </span>
            <span class="in_bottom">
                <img src="http://hovertree.com/hvtimg/bjafjg/gq0yvbe0.jpg" class="in_pic" />
            </span>
        </div>
    </div>
    <div class="hovertreeinfo"><a href="http://hovertree.com">何問起</a>
<a href="http://hovertree.com/menu/texiao/">網頁特效</a> 
    <a href="http://hovertree.com/h/bjaf/ysr2o1du.htm">代碼說明</a>
    <br />
    手機掃描下面二維碼：<br />
    <img src="http://hovertree.com/hvtimg/bjafjg/v8udjl8o.png" alt="二維碼"/>
    </div>
</body>
</html>

轉自：http://hovertree.com/h/bjaf/ysr2o1du.htm

胖子開會(打一城市名)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3 3d旋轉圖片立方體特效代碼 CSS3實現嵌套立方體旋轉的3D效果 CSS3之3D立方體效果用css3做一個3D立方體 CSS動畫實例：3D立方體 CSS3實現旋轉立方體 CSS3 3D立方體翻轉菜單實現教程簡單CSS3代碼實現立方體以及3D骰子純html+css制作3D立方體和動畫效果 css3制作旋轉立方體相冊