查看效果：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

图片旋转代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<title>CSS3女神来袭 - 何问起</title>

<style>

body {

margin: 0;

background: #000;

}

#wrap {

width: 300px;

height: 400px;

position: relative;

margin: 100px auto;

-webkit-perspective: 3000px;

-moz-perspective: 3000px;

-ms-transform: perspective(3000px);

-ms-perspective: 3000px;

}

#head {

width: 100%;

height: 100%;

position: absolute;

-webkit-transform-style: preserve-3d;

-webkit-animation: donghua 15s linear 0s infinite;

-moz-transform-style: preserve-3d;

-moz-animation: donghua 15s linear 0s infinite;

-ms-transform-style: preserve-3d;

-ms-animation: donghua 25s linear 0s infinite;

}

#head div {

position: absolute;

top: 0;

left: 0;

width: 300px;

height: 400px;

border: 1px solid red;

text-align: center;

line-height: 100px;

}

#head div:nth-child(1) {

-webkit-transform: rotateY(0deg) translateZ(400px);

-moz-transform: rotateY(0deg) translateZ(400px);

-ms-transform: rotateY(0deg) translateZ(400px);

background: url(http://hovertree.com/texiao/css/14/hovertreepic/01.jpg);

background-size: cover;

}

#head div:nth-child(2) {

-webkit-transform: rotateY(36deg) translateZ(500px);

-moz-transform: rotateY(36deg) translateZ(500px);

-ms-transform: rotateY(36deg) translateZ(500px);

background: url(http://hovertree.com/texiao/css/14/hovertreepic/02.jpg);

background-size: cover;

}

#head div:nth-child(3) {

-webkit-transform: rotateY(72deg) translateZ(400px);

-moz-transform: rotateY(72deg) translateZ(400px);

-ms-transform: rotateY(72deg) translateZ(400px);

background: url(http://cms.hovertree.com/hvtimg/201511/9rour12a.jpg);

background-size: cover;

}

#head div:nth-child(4) {

-webkit-transform: rotateY(108deg) translateZ(500px);

-moz-transform: rotateY(108deg) translateZ(500px);

-ms-transform: rotateY(108deg) translateZ(500px);

background: url(http://hovertree.com/texiao/css/14/hovertreepic/04.jpg);

background-size: cover;

}

#head div:nth-child(5) {

-webkit-transform: rotateY(144deg) translateZ(400px);

-moz-transform: rotateY(144deg) translateZ(400px);

-ms-transform: rotateY(144deg) translateZ(400px);

background: url(http://hovertree.com/texiao/css/14/hovertreepic/05.jpg);

background-size: cover;

}

#head div:nth-child(6) {

-webkit-transform: rotateY(180deg) translateZ(500px);

-moz-transform: rotateY(180deg) translateZ(500px);

-ms-transform: rotateY(180deg) translateZ(500px);

background: url(http://hovertree.com/texiao/css/14/hovertreepic/06.jpg);

background-size: cover;

}

#head div:nth-child(7) {

-webkit-transform: rotateY(216deg) translateZ(400px);

-moz-transform: rotateY(216deg) translateZ(400px);

-ms-transform: rotateY(216deg) translateZ(400px);

background: url(http://hovertree.com/texiao/css/14/hovertreepic/07.jpg);

background-size: cover;

}

#head div:nth-child(8) {

-webkit-transform: rotateY(252deg) translateZ(500px);

-moz-transform: rotateY(252deg) translateZ(500px);

-ms-transform: rotateY(252deg) translateZ(500px);

background: url(http://hovertree.com/texiao/css/14/hovertreepic/08.jpg);

background-size: cover;

}

#head div:nth-child(9) {

-webkit-transform: rotateY(288deg) translateZ(400px);

-moz-transform: rotateY(288deg) translateZ(400px);

-ms-transform: rotateY(288deg) translateZ(400px);

background: url(http://hovertree.com/hvtimg/201511/6j9j6tk5.png);

background-size: cover;

}

#head div:nth-child(10) {

-webkit-transform: rotateY(324deg) translateZ(500px);

-moz-transform: rotateY(324deg) translateZ(500px);

-ms-transform: rotateY(324deg) translateZ(500px);

background: url(http://cms.hovertree.com/hvtimg/201512/wfevf6yh.jpg);

background-size: cover;

}

@-webkit-keyframes donghua {

0% {

transform: rotateX(5deg) rotateY(360deg);

}

50% {

transform: rotateX(-5deg) rotateY(180deg);

}

100% {

transform: rotateX(5deg) rotateY(0deg);

}

}

@-moz-keyframes donghua {

0% {

transform: rotateY(10deg) rotateY(0deg);

}

50% {

transform: rotateY(-10deg) rotateY(180deg);

}

100% {

transform: rotateY(10deg) rotateY(360deg);

}

}

@-ms-keyframes donghua {

0% {

transform: rotateY(10deg) rotateY(0deg);

}

50% {

transform: rotateY(-10deg) rotateY(180deg);

}

100% {

transform: rotateY(10deg) rotateY(360deg);

}

}a{color:white}

</style>

</head>

<body>

<div id="wrap">

<div id="head">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</div><div style="margin:0px auto;text-align:center;width:736px">

<h2>图片立体旋转</h2><a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>

<a href="http://hovertree.com/h/bjaf/a6598spx.htm">原文</a>

  <a href="http://hovertree.com/texiao/css/14/1.htm">Demo 2</a></div>

</body>

</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. WCF学习之旅—WCF第二个示例（五）

    二.WCF服务端应用程序 第一步,创建WCF服务应用程序项目 打开Visual Studio 2015,在菜单上点击文件—>新建—>项目—>WCF服务应用程序.在弹出界面的“名称”对 ...

  2. 有关binlog的那点事（三）（mysql5.7.13）

    这次我们要探索更精细的binlog内容,上次讨论的Query_event和Rows_event肯定有让你疑惑不解的问题.Query_event中的status-vars环境变量有哪些,Rows_eve ...

  3. datagrid界面，链接数据库读取数据

    1.学生列表的 HTML部分 <script type="text/javascript"> $(function(){ //创建dataGrid $("#d ...

  4. Go 作用

    Go语句的作用是表示一个batch(多条Tsql命令)的结束,并向sql server 提交batch,由于局部变量的作用域是基于batch的,所以,go语句限制局部变量的作用域在一个batch中. ...

  5. 【.NET深呼吸】线程信号量（Semaphore）

    Semaphore类可以控制某个资源允许访问的线程数,Semaphore有命名式的,也有不命名的:如果不考虑跨进程工作,一般在代码中使用不命名方式即可. 信号量有点类似于等待句柄,某个线程如果调用了W ...

  6. TSQL语句练习题

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. select Sname,Ssex,Class from Student 2. 查询教师所有的单位即不重复的Depart列 ...

  7. 我被比特币撞了一下腰——记OKCoin试用体验

    本博客还有大量的.NET开源技术文章,您可能感兴趣: 1.开源Math.NET基础数学类库使用系列文章:链接 2.开源C#彩票数据资料库系列文章:链接 3.开源的.NET平台ORM组件文章:链接 4. ...

  8. ES6 - Note2：解构赋值

    ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量. 1.数组的解构赋值 在ES6以前,变量的赋值是直接指定的,以后可以这么来写,如下所示 let [a,b,c] = [1 ...

  9. 我的Objective-C系列文章

    做iOS开发有一段时间了,也有自己上线的App产品,也在坚持着发表技术博客总结自己所学的东西.在写博客的时候虽然博文中不免有错别字,但每句话都是在斟酌之后所写的,每篇博客所粘贴的代码都是经过调试运行无 ...

  10. winform中textbox属性Multiline=true时全选

    1.文本框右键属性 => 添加KeyDown事件. 2.添加如下代码: private void txt_result_KeyDown(object sender, KeyEventArgs e ...