查看效果：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. 初识Jsp，JavaBean,Servlet以及一个简单mvc模式的登录界面

    1:JSP JSP的基本语法:指令标识page,include,taglib;page指令标识常用的属性包含Language用来定义要使用的脚本语言:contentType定义JSP字符的编码和页面响 ...

  2. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  3. python学习之day1-基础知识

    1.变量 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过变量名访问.在python中,如果要使用一个变量,不需要提前声明,只需要在用的时候,给这个变量赋值即可.pytho ...

  4. 爆一个VS2015 Update1更新带来的编译BUG【已有解决方案】

    一个编译的BUG,在原生的VS2015中没有问题,但更新至VS2015 Update1之后就有了,大概是Update1用了新的编译器,害得我好苦.经测试,VS2013 Update5中也存在这个问题, ...

  5. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  6. Objective-C中的老板是这样发通知的（Notification)

    ​    ​通知(Notification)简单的类比一下,公司的老总给下面的员工发通知啦,说明天公司要上市,各部门做一下准备工作.等通知发完,各部门收到后各司其职,做着自己该做的东西.假如Boss是 ...

  7. mysql乐观锁总结和实践--转

    原文地址:http://chenzhou123520.iteye.com/blog/1863407 上一篇文章<MySQL悲观锁总结和实践>谈到了MySQL悲观锁,但是悲观锁并不是适用于任 ...

  8. JSON学习

    1.JSON 语法是 JavaScript 对象表示语法的子集. l  数据在名称/值对中 l  数据由逗号分隔 l  花括号保存对象 l  方括号保存数组 JSON 值可以是: l  数字(整数或浮 ...

  9. 【JUC】JDK1.8源码分析之ConcurrentHashMap（一）

    一.前言 最近几天忙着做点别的东西,今天终于有时间分析源码了,看源码感觉很爽,并且发现ConcurrentHashMap在JDK1.8版本与之前的版本在并发控制上存在很大的差别,很有必要进行认真的分析 ...

  10. maven pom中 设置远程仓库url

    <repositories> <!--<repository>--> <!--<id>spring-snapshots</id>--& ...