纯css3 3D图片立方体旋转动画特效-html教學-PHP中文網

首頁

web前端

html教學

纯css3 3D图片立方体旋转动画特效

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 21, 2016 pm 02:53 PM

纯css3 3D立方体模块，鼠标触碰，模块炸开，大立方体中套小立方体

效果展示

手机扫描二维码体验效果：

效果图如下：

源码下载：http://hovertree.com/h/bjaf/0qmul8gc.htm

代码如下：

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css-3d旋转相册_何问起<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">><span style="color: #800000;">base </span><span style="color: #ff0000;">target</span><span style="color: #0000ff;">="_blank"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="http://hovertree.com/texiao/css3/34/hovertree.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="hovertreeinfo"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>何问起css-3d旋转相册<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>请把光标移到立方体上面，或者点击图片。<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="还原"</span> <span style="color: #0000ff;">/></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #008000;"><!--</span><span style="color: #008000;">/*外层最大容器*/</span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="wrap"</span><span style="color: #0000ff;">></span>
        <span style="color: #008000;"><!--</span><span style="color: #008000;">    /*包裹所有元素的容器*/</span><span style="color: #008000;">--></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cube"</span><span style="color: #0000ff;">></span>
            <span style="color: #008000;"><!--</span><span style="color: #008000;">前面图片 </span><span style="color: #008000;">--></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="out_front"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/p1n3aebo.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #008000;"><!--</span><span style="color: #008000;">后面图片 </span><span style="color: #008000;">--></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="out_back"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/6omilcpi.png"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #008000;"><!--</span><span style="color: #008000;">左图片 </span><span style="color: #008000;">--></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="out_left"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/7ciu9jqt.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="out_right"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/x9h3ho61.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="out_top"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/1rysrqvg.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="out_bottom"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/nre7yne5.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #008000;"><!--</span><span style="color: #008000;">小正方体 </span><span style="color: #008000;">--></span>
            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in_front"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/wctv4yie.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="in_pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in_back"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/d1w0ani7.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="in_pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in_left"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/dys40n99.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="in_pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in_right"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/6sqnrrgc.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="in_pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in_top"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/o73nrdo4.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="in_pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in_bottom"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/gq0yvbe0.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="in_pic"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="hovertreeinfo"</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://hovertree.com"</span><span style="color: #0000ff;">></span>何问起<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://hovertree.com/menu/texiao/"</span><span style="color: #0000ff;">></span>网页特效<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> 
    <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://hovertree.com/h/bjaf/ysr2o1du.htm"</span><span style="color: #0000ff;">></span>代码说明<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span><span style="color: #000000;">
    手机扫描下面二维码：</span><span style="color: #0000ff;"><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://hovertree.com/hvtimg/bjafjg/v8udjl8o.png"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="二维码"</span><span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

推荐：http://hovertree.com/h/bjaf/komyoiki.htm

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

更多特效：http://www.cnblogs.com/jihua/p/webfront.html

胖子开会(打一城市名)

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。