查看效果：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. Security1:Create Login

    Login 用于登陆SQL Server,语法是 -- Syntax for SQL Server CREATE LOGIN login_name { WITH <option_list1> ...

  2. java中volatile关键字

    一.前言 JMM提供了volatile变量定义.final.synchronized块来保证可见性. 用volatile修饰的变量,线程在每次使用变量的时候,都会读取变量修改后的最的值.volatil ...

  3. 优化javaScript代码，提高执行效率

    今天看完书,总结了一下可以如何优化 JavaScript . 1.合并js文件 为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件.跟十个5k的js文件相比,合并成一个50k的文件更 ...

  4. MySQL学习笔记十七：复制特性

    一.MySQL的复制是将主数据库(master)的数据复制到从(slave)数据库上,专业一点讲就是将主数据库DDL和DML操作的二进制日志传到从库上,然后从库对这些二进制日志进行重做,使得主数据库与 ...

  5. [备忘] Automatically reset Windows Update components

    这两天遇到Windows 10的更新问题,官方有一个小工具,可以用来修复Windows Update的问题,备忘如下 https://support.microsoft.com/en-us/kb/97 ...

  6. 如何在制作jar包时引用第三方jar包

    我用的是Eclipse打包,但在CMD窗口执行的时候报“ActiveMQ.jar中没有主清单属性”错误. 在网上搜了下,这个与MANIFEST.MF文件有关,该文件没有定义MAIN方法所在类的路径,利 ...

  7. [CUDA] CUDA to DL

    又是一枚祖国的骚年,阅览做做笔记:http://www.cnblogs.com/neopenx/p/4643705.html 这里只是一些基础知识.帮助理解DL tool的实现. “这也是深度学习带来 ...

  8. ZOJ Problem Set - 1067 Color Me Less

    这道题目很简单,考察的就是结构体数组的应用,直接贴代码了 #include <stdio.h> #include <math.h> typedef struct color { ...

  9. spring笔记--通过注解(annotation)配置Bean

    Spring能够在classpath下自动扫描,侦测和实例化具有特定注解的组件,这在Spring中成为组件扫描(Component scanning). 特定组件的注解包括: @Component:基 ...

  10. Hive启动报错： Found class jline.Terminal, but interface was expected

    报错: [ERROR] Terminal initialization failed; falling back to unsupported java.lang.IncompatibleClassC ...