查看效果：http://hovertree.com/texiao/css/14/

本效果用css3的animation实现动画

定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值： none 0 ease 0 1 normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animation="movehovertree 5s infinite"

语法
animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

示例：http://hovertree.com/texiao/css/14/1.htm

图片旋转代码如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>CSS3女神来袭 - 何问起</title>
  6. <style>
  7. body {
  8. margin: 0;
  9. background: #000;
  10. }
  11.  
  12. #wrap {
  13. width: 300px;
  14. height: 400px;
  15. position: relative;
  16. margin: 100px auto;
  17. -webkit-perspective: 3000px;
  18. -moz-perspective: 3000px;
  19. -ms-transform: perspective(3000px);
  20. -ms-perspective: 3000px;
  21. }
  22.  
  23. #head {
  24. width: 100%;
  25. height: 100%;
  26. position: absolute;
  27. -webkit-transform-style: preserve-3d;
  28. -webkit-animation: donghua 15s linear 0s infinite;
  29. -moz-transform-style: preserve-3d;
  30. -moz-animation: donghua 15s linear 0s infinite;
  31. -ms-transform-style: preserve-3d;
  32. -ms-animation: donghua 25s linear 0s infinite;
  33. }
  34.  
  35. #head div {
  36. position: absolute;
  37. top: 0;
  38. left: 0;
  39. width: 300px;
  40. height: 400px;
  41. border: 1px solid red;
  42. text-align: center;
  43. line-height: 100px;
  44. }
  45.  
  46. #head div:nth-child(1) {
  47. -webkit-transform: rotateY(0deg) translateZ(400px);
  48. -moz-transform: rotateY(0deg) translateZ(400px);
  49. -ms-transform: rotateY(0deg) translateZ(400px);
  50. background: url(http://hovertree.com/texiao/css/14/hovertreepic/01.jpg);
  51. background-size: cover;
  52. }
  53.  
  54. #head div:nth-child(2) {
  55. -webkit-transform: rotateY(36deg) translateZ(500px);
  56. -moz-transform: rotateY(36deg) translateZ(500px);
  57. -ms-transform: rotateY(36deg) translateZ(500px);
  58. background: url(http://hovertree.com/texiao/css/14/hovertreepic/02.jpg);
  59. background-size: cover;
  60. }
  61.  
  62. #head div:nth-child(3) {
  63. -webkit-transform: rotateY(72deg) translateZ(400px);
  64. -moz-transform: rotateY(72deg) translateZ(400px);
  65. -ms-transform: rotateY(72deg) translateZ(400px);
  66. background: url(http://cms.hovertree.com/hvtimg/201511/9rour12a.jpg);
  67. background-size: cover;
  68. }
  69.  
  70. #head div:nth-child(4) {
  71. -webkit-transform: rotateY(108deg) translateZ(500px);
  72. -moz-transform: rotateY(108deg) translateZ(500px);
  73. -ms-transform: rotateY(108deg) translateZ(500px);
  74. background: url(http://hovertree.com/texiao/css/14/hovertreepic/04.jpg);
  75. background-size: cover;
  76. }
  77.  
  78. #head div:nth-child(5) {
  79. -webkit-transform: rotateY(144deg) translateZ(400px);
  80. -moz-transform: rotateY(144deg) translateZ(400px);
  81. -ms-transform: rotateY(144deg) translateZ(400px);
  82. background: url(http://hovertree.com/texiao/css/14/hovertreepic/05.jpg);
  83. background-size: cover;
  84. }
  85.  
  86. #head div:nth-child(6) {
  87. -webkit-transform: rotateY(180deg) translateZ(500px);
  88. -moz-transform: rotateY(180deg) translateZ(500px);
  89. -ms-transform: rotateY(180deg) translateZ(500px);
  90. background: url(http://hovertree.com/texiao/css/14/hovertreepic/06.jpg);
  91. background-size: cover;
  92. }
  93.  
  94. #head div:nth-child(7) {
  95. -webkit-transform: rotateY(216deg) translateZ(400px);
  96. -moz-transform: rotateY(216deg) translateZ(400px);
  97. -ms-transform: rotateY(216deg) translateZ(400px);
  98. background: url(http://hovertree.com/texiao/css/14/hovertreepic/07.jpg);
  99. background-size: cover;
  100. }
  101.  
  102. #head div:nth-child(8) {
  103. -webkit-transform: rotateY(252deg) translateZ(500px);
  104. -moz-transform: rotateY(252deg) translateZ(500px);
  105. -ms-transform: rotateY(252deg) translateZ(500px);
  106. background: url(http://hovertree.com/texiao/css/14/hovertreepic/08.jpg);
  107. background-size: cover;
  108. }
  109.  
  110. #head div:nth-child(9) {
  111. -webkit-transform: rotateY(288deg) translateZ(400px);
  112. -moz-transform: rotateY(288deg) translateZ(400px);
  113. -ms-transform: rotateY(288deg) translateZ(400px);
  114. background: url(http://hovertree.com/hvtimg/201511/6j9j6tk5.png);
  115. background-size: cover;
  116. }
  117.  
  118. #head div:nth-child(10) {
  119. -webkit-transform: rotateY(324deg) translateZ(500px);
  120. -moz-transform: rotateY(324deg) translateZ(500px);
  121. -ms-transform: rotateY(324deg) translateZ(500px);
  122. background: url(http://cms.hovertree.com/hvtimg/201512/wfevf6yh.jpg);
  123. background-size: cover;
  124. }
  125.  
  126. @-webkit-keyframes donghua {
  127. 0% {
  128. transform: rotateX(5deg) rotateY(360deg);
  129. }
  130.  
  131. 50% {
  132. transform: rotateX(-5deg) rotateY(180deg);
  133. }
  134.  
  135. 100% {
  136. transform: rotateX(5deg) rotateY(0deg);
  137. }
  138. }
  139.  
  140. @-moz-keyframes donghua {
  141. 0% {
  142. transform: rotateY(10deg) rotateY(0deg);
  143. }
  144.  
  145. 50% {
  146. transform: rotateY(-10deg) rotateY(180deg);
  147. }
  148.  
  149. 100% {
  150. transform: rotateY(10deg) rotateY(360deg);
  151. }
  152. }
  153.  
  154. @-ms-keyframes donghua {
  155. 0% {
  156. transform: rotateY(10deg) rotateY(0deg);
  157. }
  158.  
  159. 50% {
  160. transform: rotateY(-10deg) rotateY(180deg);
  161. }
  162.  
  163. 100% {
  164. transform: rotateY(10deg) rotateY(360deg);
  165. }
  166. }a{color:white}
  167. </style>
  168. </head>
  169. <body>
  170.  
  171. <div id="wrap">
  172. <div id="head">
  173. <div></div>
  174. <div></div>
  175. <div></div>
  176. <div></div>
  177. <div></div>
  178. <div></div>
  179. <div></div>
  180. <div></div>
  181. <div></div>
  182. <div></div>
  183. </div>
  184. </div><div style="margin:0px auto;text-align:center;width:736px">
  185. <h2>图片立体旋转</h2><a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
  186. <a href="http://hovertree.com/h/bjaf/a6598spx.htm">原文</a>
  187.   <a href="http://hovertree.com/texiao/css/14/1.htm">Demo 2</a></div>
  188. </body>
  189. </html>

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

css3相册图片3D旋转展示特效的更多相关文章

  1. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  2. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

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

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

  4. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  5. 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制,而当中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换就可以实现更好的展示效果,简洁而有用. 书本的3D ...

  6. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  7. 图片3D旋转

    <!DOCTYPE html5> <html lang="en"> <head> <meta charset="UTF-8&qu ...

  8. CSS3实现图片循环旋转

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

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

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

随机推荐

  1. salesforce 零基础学习（四十七） 数据加密简单介绍

    对于一个项目来说,除了稳定性以及健壮性以外,还需要有较好的安全性,此篇博客简单描述salesforce中关于安全性的一点小知识,特别感谢公司中的nate大神和鹏哥让我学到了新得知识. 项目简单背景: ...

  2. Spring学习记录(六)---使用外部属性文件

    在bean配置资源或系统部署,如数据库的连接时,需要这样: 要包含相关jar包:c3p0.jar 和mysql.connector.jar xml配置: <bean id="dataS ...

  3. PHP SESSION机制,从存储到读取

    PHP中,如果要获取SESSION数据,必须要有对应的session_id,session_id的获取方式有两种 1.基于客户端的cookie 2.基于url 先说第一种情况,基于客户端的cookie ...

  4. 应用程序框架实战十三:DDD分层架构之我见

    前面介绍了应用程序框架的一个重要组成部分——公共操作类,并提供了一个数据类型转换公共操作类作为示例进行演示.下面准备介绍应用程序框架的另一个重要组成部分,即体系架构支持.你不一定要使用DDD这样的架构 ...

  5. Ubuntu杂记——双系统重装Win7后找不到Ubuntu的解决办法

    之前装过Ubuntu和Win7的双系统,后来重装了Win7,发现Ubuntu不见了,那会没怎么用,也没去解决问题.现在再看Android内核剖析,大部分都是在Ubuntu环境下进行的,所以百度了一些方 ...

  6. js 利用throw 写的一个小程序

    在下边的小程序中比较特殊的是使用isNaN()函数判断一个参数是不是数字, <!DOCTYPE html> <!DOCTYPE html> <html> <h ...

  7. Azure Application Gateway (3) 设置URL路由

    <Windows Azure Platform 系列文章目录> 在之前的文章中,笔者介绍了Azure Web App可以设置URL路由.如下图: 在这里笔者简单介绍一下,首先我们还是创建以 ...

  8. 【NET MVC】View

    通过阅读一些书籍,结合源代码,稍微深入的学习了Asp.Net MVC中的视图View 任何类型的响应都可以利用当前HttpResponse来响应,MVC可以通过Controller的Response属 ...

  9. 5分钟学会使用Less预编译器

    5分钟学会使用Less预编译器 Less是什么? LESS CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法为CSS赋予了动态语言的特性,如变量.继承.运算.函数等,更方便 ...

  10. 彻底解决低端安卓手机touchend事件不触发（考虑scroll）

    本次移动端开发时遇见了安卓4.2系统不能触发touchend的问题,有以下需求. 1. 横滑轮播图 2.下拉刷新页面内容 3.body滚动条不能失效 开始在轮播图touchmove事件中阻止了浏览器默 ...