查看效果：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. Spring<bean>标签是反射来实现的

  2. MVC 区域内默认控制器不能访问（Multiple types were found that match the controller named ‘Index'）

    异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 错误信息 和主页的默认控制器冲突了,修改下Areas里面的默认控制器就可以了

  3. 【Win 10应用开发】多窗口视图

    Windows App一般情况下,同一时刻只能有一个应用程序实例在运行,为了在特殊需求下可以同时呈现不同的UI,SDK提供了多视图操作支持. 应用程序可以创建新的应用视图,以新的视图为基础可以呈现与主 ...

  4. 前端MVC框架Backbone 1.1.0源码分析(二) - 模型

    模型是什么? Models are the heart of any JavaScript application, containing the interactive data as well a ...

  5. 传智播客--高级控件--showdialog关闭（小白内容）

    以往我在WPF里,用ShowDialog展示出一个页面,一般都是用Close()进行关闭. 今天看传智播客的视频时,了解到还能直接给DialogResult一个TRUE或者false的属性,使页面关闭 ...

  6. Android入门(二十一)解析XML

    原文链接:http://www.orlion.ga/685/ 解析XML常用的方式有两种,一种是PULL解析一种是SAX解析. 假设解析数据为: <apps>     <app> ...

  7. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  8. C#由变量捕获引起对闭包的思考

    前言 偶尔翻翻书籍看看原理性的东西确实有点枯燥,之前有看到园中有位园友说到3-6年工作经验的人应该了解的.NET知识,其中就有一点是关于C#中的闭包,其实早之前在看书时(之前根本不知道C#中还有闭包这 ...

  9. Apache漏洞修复

    今天受同事的委托,修复一台服务器的Apache漏洞,主要集中在以下几点: 1.Apache httpd remote denial of service(中危) 修复建议:将Apache HTTP S ...

  10. SPRING多个占位符配置文件解析源码研究--转

    原文地址:http://www.cnphp6.com/archives/85639 Spring配置文件: <context:property-placeholder location=&quo ...