此处只是记录，解析可见原文：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. Win32_Battery class

    wmi的Win32_Battery类实现 其中EstimatedChargeRemaining属性返回剩余电量的百分比,EstimatedRunTime属性返回剩余时间(分钟) 其他属性参考http: ...

  2. 最受欢迎的Web开发工具

    1)WebBuilderWebBuilder是一款开源的可视化Web应用开发和运行平台.基于浏览器的集成开发环境,可视化和智能化的设计,能轻松完成常规应用和面向手机的移动应用开发:高效.稳定和可扩展的 ...

  3. [每日一题] OCP1z0-047 :2013-07-26 alter table set unused之后各种情况处理

    有疑问可以去itpub讨论:http://www.itpub.net/thread-1804872-1-1.html 对于alter table setunused的用法,查官方文档: alter_t ...

  4. About Spring

    “Spring is the most popular application development framework for enterprise Java.”这是Spring官方首页上的第一句 ...

  5. Visual Studio 2012设置Jquery/Javascript智能提示

    Visual Studio 2012设置Jquery/Javascript智能提示 在Visual Studio 2008 Visual Studio 2010中微软已经开始支持jquery/java ...

  6. Arduino 串口篇 Arduino发送十六进制 send HEX via serial port RS232-to-USB to PC

    发送十六进制比较直观,可以在上位机中直接获取十六进制的数据,然后在在上位机上将十六进制HEX转换成BIN(二进制)或者DEC(十进制)就十分简单有效了. 下面是在Arduino上怎么演示直接发送16进 ...

  7. 2440裸机驱动之PWM开发

    原文http://blog.chinaunix.net/uid-14114479-id-3125685.html ARM驱动蜂鸣器的方式有两种:一种是PWM输出口直接驱动,另一种是利用IO定时翻转电平 ...

  8. 使用SmsManager服务群发短信

    SmsManager是Android提供的一个非常常见的服务,SmsManager提供了一系列sendXxxMessage()方法用于发送短信,不过短信通常都是普通文本,调用sendTextMessa ...

  9. Docker 基础 : 网络配置

    大量的互联网应用服务包含多个服务组件,这往往需要多个容器之间通过网络通信进行相互配合.Docker 目前提供了映射容器端口到宿主主机和容器互联机制来为容器提供网络服务.接下来我们将讲述 Docker ...

  10. dapper 可空bool转换出错及解决方案

    最近使用entityframewok生成数据库,使用dapper来访问数据库,产生了一个意外的bug,下面是产生bug的示例以及解决方案. 由于用entityframework生成数据库,默认情况en ...