此处只是记录，解析可见原文：http://www.cnblogs.com/skyblue-li/p/6092799.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>旋转图片</title>

    <style>

        * {

            padding: 0px;

            margin: 0px;

        }

        /*这是为了消除默认dom元素的内外边距，使得我们写css的时候更精确*/

        body {

            background: #000;

        }

        #photos {

            width: 110px; /*宽度*/

            height: 180px; /*高度*/

            /*border: 1px solid #ccc;*/ /*加一个灰色边框*/

            margin: 160px auto; /*水平居中，高度距离顶部100px*/

            transform-style: preserve-3d; /*设置3d环境*/

            perspective: 800px; /*设置景深为800px*/

            /*transform: rotateY(0deg);*/

            transform: rotateX(-10deg);

        }

            #photos img {

                width: 100%;

                height: 100%;

                position: absolute;

                box-shadow: 0 0 8px #eaeaea;

                box-shadow: 1px -1px 6px #666;

                border-radius: 4px;

                -webkit-box-reflect: below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));

                cursor: pointer;

            }

            #photos div {

                width: 1200px;

                height: 1200px;

                border-radius: 50%;

                position: absolute;

                top: 102%;

                left: 50%;

                margin-left: -600px;

                margin-top: -600px;

                transform: rotateX(90deg);

                background: -webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0));

            }

    </style>

    <script>

        function mystyle() {

            var photosDom = document.getElementById('photos');

            //获取图片数组

            var images = photosDom.getElementsByTagName('img');

            //获取图片数量

            var len = images.length;

            //计算每张图片按Y轴旋转的角度

            var deg = Math.floor(360 / len);

            var x = 0;

            var timer1 = setInterval(function () {

                for (var i = 0; i < len; i++) {

                    images[i].style.transform = 'rotateY(' + (deg * i + x * 0.2) + 'deg) translateZ(380px)'; //deg前面不要加空格

                }

                x++;

                //photosDom.style.transform = "rotateX(-10deg) rotateY(" + (x++) * 0.2 + "deg)";

            }, 30);

            var rx = -10;

            var rxf = 1;

            var tx = 0;

            var txf = 1;

            var timer2 = setInterval(function () {

                rx = rx + (random(0, 2)) * 0.01 * rxf;

                if (rx > 0)

                {

                    rxf = -1;

                }

                if (rx < -15) {

                    rxf = 1;

                }

                tx = tx + (random(0, 5)) * 0.01 * txf;

                if (tx > 100) {

                    txf = -1;

                }

                if (tx < -100) {

                    txf = 1;

                }

                photosDom.style.transform = "rotateX(" + rx + "deg) translateX(" + tx + "px)";

            }, 100);

        }

        // 获取范围内随机数

        function random(min, max) {

            return Math.random() * (max - min) + min;

        }

    </script>

</head>

<body onload="mystyle()">

    <div id="photos">

        <img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]02.jpg" />

        <img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]03.jpg" />

        <img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]04.jpg" />

        <img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]05.jpg" />

        <img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]06.jpg" />

        <img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]07.jpg" />

        <img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]08.jpg" />

        <img src="D:\Documents\Pictures\东方[Black Album]图册\[Black Album 2]09.jpg" />

        <div></div>

    </div>

</body>

</html>

css3制作3d旋转相册的更多相关文章

  1. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  2. CSS3制作3D旋转视频展示区

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS3实现3D旋转相册

    静态效果图: 代码如下: <!doctype html><html lang="en"><head> <meta charset=&quo ...

  4. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. CSS3特效----制作3D旋转导航

    大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...

  6. 用CSS3制作的旋转六面体动画

    这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

  7. css3之3D 旋转立方体与哆啦A梦

    主要记录两个css3 3D转换的示例   ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...

  8. 低调奢华 CSS3 transform-style 3D旋转

    点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...

  9. CSS3特效----制作3D旋转照片展示区

    任务一.制作多背景 提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204, ...

随机推荐

  1. ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇

    由ASP.NET所谓前台调用后台.后台调用前台想到HTTP——实践篇 在由ASP.NET所谓前台调用后台.后台调用前台想到HTTP——理论篇中描述了一下ASP.NET新手的三个问题及相关的HTTP协议 ...

  2. C++内存中的封装、继承、多态（上）

    C++内存中的封装.继承.多态(上) 继我的上一篇文章:浅谈学习C++时用到的[封装继承多态]三个概念 此篇我们从C++对象内存布局和构造过程来具体分析C++中的封装.继承.多态. 一.封装模型的内存 ...

  3. 学习ExpressionTree(做装配脑袋出的练习题)

    1 // 第一题:画出下列表达式的表达式树.一开始,您很可能不知道某些操作其实也是表达式(比如取数组的运算符a[2]),不过没有关系,后面的习题将帮你验证这一点. //-a ParameterExpr ...

  4. jQuery获取checkbox选中项等操作及注意事项

    jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...

  5. Aspose.cells异步读写操作

    public class AsyncExcel : Excel { static readonly object _objForlock = new object(); //public List&l ...

  6. svn签出单个文件

    ) { return new string[]{ string.Format("cd /d \"{0}\"",System.IO.Path.GetDirecto ...

  7. TaskTracker获取并执行map或reduce任务的过程1

    TaskTracker获取并执行map或reduce任务的过程(一) 我们知道TaskTracker在默认情况下,每个3秒就行JobTracker发送一个心跳包,也就是在这个心跳包中包含对任务的请求. ...

  8. Ubuntu12.04安装配置Theano

    上次写了一个关于DL的开篇内容,本来说是要继续跟进的,后来教研室里面出了一些事情,加上写论文.和隔壁教研室做实验,就一直拖到现在.早就让小K配置环境研究研究Theano,这货和我一样也发拖延症了,理由 ...

  9. .NET接口和类 反射的差异性发现

    1 背景 在项目中使用反射,反射出某类型的所有属性(Property)和对应的属性值.起初为了性能考虑在模块首次加载就反射类型的所有属性并将其存入字典.根据一般的编程规范——基于接口编程,所以首次传入 ...

  10. 谈谈new Thread的弊端及Java四种线程池的使用

    1.new Thread的弊端执行一个异步任务你还只是如下new Thread吗? new Thread(new Runnable() { @Override public void run() { ...