此处只是记录，解析可见原文：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. textarea定位光标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery Colorbox是一款弹出层

    jQuery Colorbox使用教程 jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,最关键的是大小只有10KB,当然我主要是用来弹出图片啦,(之前介绍过jquery Fancy ...

  3. 框架的设计之IRepository还是IRepository<T>

    [Yom框架]漫谈个人框架的设计之[是IRepository还是IRepository<T>]? 前言                                            ...

  4. WP8开发札记（二）让程序支持锁屏运行

    我们都知道WP8是采用墓碑机制来管理应用程序的. 当我们把手机锁屏了,默认情况下,App就触发了deactivated 事件,准备被墓碑化了. 但是,有些时间我们不想让程序就此终止运行.(比如说,你开 ...

  5. CSS 实现的各种球体效果

    CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...

  6. MSBuild是什么？

    MSBuild入门 MSBuild是什么? MSBuild全称(Microsoft Build Engine),是用来生成.NET程序的平台.您可能不知道它,但是如果您在使用VS做开发,那么一定时时刻 ...

  7. 跨站请求伪造（Cross Site Request Forgery (CSRF)）

    跨站请求伪造(Cross Site Request Forgery (CSRF)) 跨站请求伪造(Cross Site Request Forgery (CSRF)) 跨站请求伪造(Cross Sit ...

  8. tastypie Django REST framework API [Hello JSON]

    tastypie is a good thing. Haven't test it thoroughly. Gonna need some provement. Now I will introduc ...

  9. sql server常有的问题-实时错误'91' 对象变量或with块变量未设置

    这样的问题,对于我们这样的初学者来说,无疑是一个接触sql server后第一个艰难的问题,“实时错误'91' 对象变量或with块变量未设置”这句话到底透露出什么信息?直至写此博文,我依然看不出什么 ...

  10. hdu3579 Hello Kiki（数论）

    用到中国剩余定理,然后用扩展欧几里得算法求解. 这里有两个注意点,1.硬币数量不能为0或者负数 2.每个group数量有可能大于50,样例中就有 #include<stdio.h> #in ...