登录  /  注册

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

php中文网
发布: 2016-07-21 14:53:05
原创
2067人浏览过

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

效果展示

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


效果图如下:


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

代码如下:

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</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;">/&gt;<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;">/&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>css-3d旋转相册_何问起<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;<span style="color: #800000;">base </span><span style="color: #ff0000;">target</span><span style="color: #0000ff;">="_blank"</span> <span style="color: #0000ff;">/&gt;</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;">/&gt;</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</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;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">&gt;</span>何问起css-3d旋转相册<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">&gt;</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;">/&gt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</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;">&gt;</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;">/&gt;</span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</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;">&gt;<span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://hovertree.com"</span><span style="color: #0000ff;">&gt;</span>何问起<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;</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;">&gt;</span>网页特效<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;</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;">&gt;</span>代码说明<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">br </span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;">
    手机扫描下面二维码:</span><span style="color: #0000ff;"><span style="color: #800000;">br </span><span style="color: #0000ff;">/&gt;</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;">/&gt;</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</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

胖子开会(打一城市名)

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号