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

时间：2022-12-24 12:50:40

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

效果展示

手机扫描二维码体验效果：
纯css3 3D图片立方体旋转动画特效

效果图如下：
纯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="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaG92ZXJ0cmVlLmNvbS9odnRpbWcvYmphZmpnL3Y4dWRqbDhvLnBuZw==.jpg" alt="二维码"/>

    </div>

</body>

</html>

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

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

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

胖子开会(打一城市名)

纯css3 3D图片立方体旋转动画特效的更多相关文章

  1. CSS3 3D图片立方体旋转

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  2. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 制作3D图片立方体旋转特效

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...

  4. 利用CSS3给图片添加旋转背景特效

    首先看旋转特效:http://***/demo/201512/2015-12-09-css3-image-hover-animate/index.html 这是一款纯CSS3实现的当鼠标滑过图片时文字 ...

  5. 超绚丽CSS3多色彩发光立方体旋转动画

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...

  6. css3动画特效：纯css3制作win8加载动画特效

    Windows 8     完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下:   css特效代码: <style type="text/css"> ...

  7. CSS3实战开发&colon; 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  8. 纯CSS3实现图片展示特效

    本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无 ...

  9. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

随机推荐

  1. 性能调优利器之strace

    最近需要对一个自己开发的socket server的性能进行分析,刚开始还想了好长时间怎么来分析.后来才意识到其实使用strace就足够了. 观察到的现象是server单进程CPU使用率97,但磁盘i ...

  2. Java 获取 Unix时间戳

    unix时间戳是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒. 在大多数的UNIX系统中UNIX时间戳存储为32位,这样会引发2038年问题. 但是,因为需求是需要int类 ...

  3. mysql 字符串处理优化

    周五下午,同事突然说有个存储过程要帮忙优化,就拿来看看,大概看了下: 数据库端需求:数据库中要存储一个AppID字段,对应一个Account可以自行设置自己的AppID(我就不从业务上多说了), 以前 ...

  4. UvaLive 5026 Building Roads

    传送门 Time Limit: 3000MS Description There is a magic planet in the space. There is a magical country ...

  5. iTerm2 &plus; oh my zsh代替mac自带的bash shell

    使用Solarized dark配色方案 需要字体menlo for powerline oh-my-zsh主题使用agnoster,这个主题默认的路径是全路径,当路径很长的时候,就会占很长的空间,可 ...

  6. 开启 TLS 1&period;3 加密协议，极速 HTTPS 体验

    随着互联网的发展,用户对网络速度的要求也越来越高,尤其是目前在大力发展 HTTPS 的情况下,TLS 加密协议变得至关重要.又拍云在 HTTPS 的普及和性能优化上,始终做着自己的努力和贡献.2018 ...

  7. HDU1233（Kruskal&amp&semi;Prim两解）

    https://vjudge.net/problem/HDU-1233 还是畅通工程 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省*“畅通工程”的目标是使全省任何两个村庄间都可以 ...

  8. pycharm启动慢 &ndash&semi;xms -xmx相关参数设置

    Eclipse崩溃,错误提示:MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) sp ...

  9. 转 Linux下Nginx&plus;PHP&plus;MySQL配置

    Nginx是一个高性能的HTTP和反向代理服务器,同时还是IMAP/POP3/SMTP代理服务器,该程序由俄罗斯Rambler.ru 站点开发,Nginx因为性能稳定.低系统资源消耗而闻名,近几年Ng ...

  10. POJ1062&colon;昂贵的聘礼&lpar;枚举&plus;迪杰斯特拉）

    http://poj.org/problem?id=1062 Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为 ...

相关文章