查看效果：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. hibernate注解方法使用总结（转）

    原博文地址:http://blog.sina.com.cn/s/blog_935ebb670101dnre.html 1.类级别注解 @Entity     映射实体类 @Table    映射数据库 ...

  2. 浅谈JavaScript的New关键字

    原型和闭包算是JavaScript中最常见,最难以理解,最容易被当做问题的两个部分,当然还有它们的延伸,如作用域链,继承等等吧,我最近也是各种看,各种翻,记录点自己的心得,写写总会让自己的理解更深一些 ...

  3. 让setTimeout支持链式

    修改很简单,通过参数判断,然后返回下promise对象 (function() { var timeout = setTimeout; window.setTimeout = function(fn, ...

  4. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  5. 在浏览器中输入URL按下回车键后发生了什么

    在浏览器中输入URL按下回车键后发生了什么 [1]解析URL[2]DNS查询,解析域名,将域名解析为IP地址[3]ARP广播,根据IP地址来解析MAC地址[4]分别从应用层到传输层.网络层和数据链路层 ...

  6. 【彩票】彩票预测算法(一)：离散型马尔可夫链模型C#实现

    前言:彩票是一个坑,千万不要往里面跳.任何预测彩票的方法都不可能100%,都只能说比你盲目去买要多那么一些机会而已. 已经3个月没写博客了,因为业余时间一直在研究彩票,发现还是有很多乐趣,偶尔买买,娱 ...

  7. ASP.NET WebAPi之断点续传下载（下）

    前言 上一篇我们穿插了C#的内容,本篇我们继续来讲讲webapi中断点续传的其他情况以及利用webclient来实现断点续传,至此关于webapi断点续传下载以及上传内容都已经全部完结,一直嚷嚷着把S ...

  8. setTimeout与取号机之间的关系

    说到setTimeout写过javascript的伙伴们一定不会陌生,去银行办过存取款业务的伙伴一定对取号机不会陌生.今天群里有个好伙伴在问setTimeout的问题,大伙你一言我一语,讲了很多,可是 ...

  9. iOS OC语言: Block底层实现原理

    先来简单介绍一下BlockBlock是什么?苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,Block可以在任何时候执行. Block和函数的相似性:(1)可以保存代码(2) ...

  10. maven全局配置文件settings.xml详解

    概要 settings.xml有什么用? 如果在Eclipse中使用过Maven插件,想必会有这个经验:配置settings.xml文件的路径. settings.xml文件是干什么的,为什么要配置它 ...