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

效果展示

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

效果图如下：

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

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
  5.     <title>css-3d旋转相册_何问起</title><base target="_blank" />
  6.     <link rel="stylesheet" href="http://hovertree.com/texiao/css3/34/hovertree.css" />
  7. </head>
  8. <body>
  9.     <div class="hovertreeinfo">
  10.     <h2>何问起css-3d旋转相册</h2>请把光标移到立方体上面，或者点击图片。<input type="button" value="还原" /></div>
  11.     <!--/*外层最大容器*/-->
  12.     <div class="wrap">
  13.         <!--    /*包裹所有元素的容器*/-->
  14.         <div class="cube">
  15.             <!--前面图片 -->
  16.             <div class="out_front">
  17.                 <img src="http://hovertree.com/hvtimg/bjafjg/p1n3aebo.jpg" class="pic" />
  18.             </div>
  19.             <!--后面图片 -->
  20.             <div class="out_back">
  21.                 <img src="http://hovertree.com/hvtimg/bjafjg/6omilcpi.png" class="pic" />
  22.             </div>
  23.             <!--左图片 -->
  24.             <div class="out_left">
  25.                 <img src="http://hovertree.com/hvtimg/bjafjg/7ciu9jqt.jpg" class="pic" />
  26.             </div>
  27.             <div class="out_right">
  28.                 <img src="http://hovertree.com/hvtimg/bjafjg/x9h3ho61.jpg" class="pic" />
  29.             </div>
  30.             <div class="out_top">
  31.                 <img src="http://hovertree.com/hvtimg/bjafjg/1rysrqvg.jpg" class="pic" />
  32.             </div>
  33.             <div class="out_bottom">
  34.                 <img src="http://hovertree.com/hvtimg/bjafjg/nre7yne5.jpg" class="pic" />
  35.             </div>
  36.             <!--小正方体 -->
  37.             <span class="in_front">
  38.                 <img src="http://hovertree.com/hvtimg/bjafjg/wctv4yie.jpg" class="in_pic" />
  39.             </span>
  40.             <span class="in_back">
  41.                 <img src="http://hovertree.com/hvtimg/bjafjg/d1w0ani7.jpg" class="in_pic" />
  42.             </span>
  43.             <span class="in_left">
  44.                 <img src="http://hovertree.com/hvtimg/bjafjg/dys40n99.jpg" class="in_pic" />
  45.             </span>
  46.             <span class="in_right">
  47.                 <img src="http://hovertree.com/hvtimg/bjafjg/6sqnrrgc.jpg" class="in_pic" />
  48.             </span>
  49.             <span class="in_top">
  50.                 <img src="http://hovertree.com/hvtimg/bjafjg/o73nrdo4.jpg" class="in_pic" />
  51.             </span>
  52.             <span class="in_bottom">
  53.                 <img src="http://hovertree.com/hvtimg/bjafjg/gq0yvbe0.jpg" class="in_pic" />
  54.             </span>
  55.         </div>
  56.     </div>
  57.     <div class="hovertreeinfo"><a href="http://hovertree.com">何问起</a>
  58. <a href="http://hovertree.com/menu/texiao/">网页特效</a>
  59.     <a href="http://hovertree.com/h/bjaf/ysr2o1du.htm">代码说明</a>
  60.     <br />
  61.     手机扫描下面二维码：<br />
  62.     <img src="http://hovertree.com/hvtimg/bjafjg/v8udjl8o.png" alt="二维码"/>
  63.     </div>
  64. </body>
  65. </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实战开发: 纯CSS实现图片过滤分类显示特效

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

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

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

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

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

随机推荐

  1. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

  2. Linux学习日记-MVC的部署(三)

    一.Mvc与wcf 相对WCF的部署MVC还是有点麻烦,我们要考虑哪些dll是不需要的,哪些是要拷贝到本地的. 而WCF因为有些配置文件不支持,我们只需要在配置wcf时不使用配置文件而直接使用代码就行 ...

  3. C++的性能C#的产能?! - .Net Native 系列《三》：.NET Native部署测试方案及样例

    之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...

  4. 自己开发实现OAuth做webapi认证

    看到园子里面有人写的OAuth,就想把自己实现的OAuth也分享一下,关于OAuth协议这里就不再赘述. 一.作为认证服务器,首先需要提供一个可以通过appid/appsecret来获取token这样 ...

  5. ASP.NET Web API 路由对象介绍

    ASP.NET Web API 路由对象介绍 前言 在ASP.NET.ASP.NET MVC和ASP.NET Web API这些框架中都会发现有路由的身影,它们的原理都差不多,只不过在不同的环境下作了 ...

  6. ABP配套代码生成器(ABP Code Generator)帮助文档，实现快速开发

    ABP代码生成器介绍 针对abp这个框架做了一个代码生成器,功能强大.分为两大功能点,一个是数据层,一个是视图层. 数据服务层:通过它,可以实现表设计.领域层初始化.多语言.automapper自动注 ...

  7. ABP源码分析十九：Auditing

    审计跟踪(也叫审计日志)是与安全相关的按照时间顺序的记录,它们提供了活动序列的文档证据,这些活动序列可以在任何时间影响一个特定的操作. AuditInfo:定义如下图中需要被Audit的信息. Aud ...

  8. PHP_02之使用补充

    JSON字符串在项目中的应用: ①PHP服务器给客户端JS发送JSON响应数据:  PHP:   $arr=[...];   echo json_encode($arr);  JS:   var ob ...

  9. linux tree 命令

    使用cmder确实是方便了很多,想看命令帮助信息: $ help tree 以图形显示驱动器或路径的文件夹结构. TREE [drive:][path] [/F] [/A] /F 显示每个文件夹中文件 ...

  10. 【SQL】关于无法附加文件的错误

    [SQL]关于无法附加文件的错误 1.错误信息如下: 2.估计是权限问题右击属性,把权限开一下 3.然后就附加成功了~~ ——————————————————————————————————————— ...