此处只是记录，解析可见原文：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. .NET中操作IPicture、IPictureDisp

    .NET中操作IPicture.IPictureDisp的小随笔   [题外话] 最近在做一个调用某实验仪器的程序,这个仪器提供了Windows上COM的接口.调用仪器的时候需要传输图片,提供的接口里 ...

  2. socket网络编程快速上手（二）——细节问题（5）（完结篇）

    6.Connect的使用方式 前面提到,connect发生EINTR错误时,是不能重新启动的.那怎么办呢,是关闭套接字还是直接退出进程呢?如果EINTR前,三次握手已经发起,我们当然希望链路就此已经建 ...

  3. Struts启动报空指针

    严重: Exception starting filter struts2 java.lang.NullPointerException at com.opensymphony.xwork2.util ...

  4. 瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！

    纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!   前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简 ...

  5. JS关闭当前页面的方法

    JS关闭当前页面的方法 一.不带任何提示关闭窗口的js代码 1 <a href="javascript:window.opener=null;window.open('','_self ...

  6. WCF 学习笔记之双工实现

    WCF 学习笔记之双工实现 其中 Client 和Service为控制台程序 Service.Interface为类库 首先了解契约Interface两个接口 using System.Service ...

  7. 使用Func<T1, T2, TResult>

    使用Func<T1, T2, TResult> 委托返回匿名对象   Func<T1, T2, TResult> 委托 封装一个具有两个参数并返回 TResult 参数指定的类 ...

  8. hdu4284之字典树

    Intelligent IME Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. Hadoop 实现多文件输出

    比如word.txt内容如下: aaa bbb aba abc bba bbd bbbc cc ccd cce 要求按单词的首字母区分单词并分文件输出 代码如下: LineRecordWriter p ...

  10. android调用js

    1.android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...