此处只是记录，解析可见原文：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. CSS sprites减少HTTP请求

    使用CSS sprites减少HTTP请求   sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 C ...

  2. ubuntu 下面手动安装jdk

    ubuntu 下面手动安装jdk 刚才在ubuntu安装jdk和eclipse,感觉主要安装jdk比较麻烦,记录一下笔记以备后面查看 先在官网上下载jdk的tar包:http://www.oracle ...

  3. AOP编程和ASP.NET MVC

    AOP编程和ASP.NET MVC AOP(Aspect oriented programming)面向切面编程.说成切面不容易理解,代码哪里有切面?又不是三维物体.概念不管,我们从其思想来理解这个名 ...

  4. SL.XNA中的Popup

    如果要xna与sl混合显示,就不能用popup,不然会有各种显示错乱的问题.如果xna与sl单独显示,可以使用popup,但是要记得移除UIElementRenderer.就是说popup只能交给系统 ...

  5. Ogre源码编译教程

    最近突然发现Ogre引擎更新到2.1版本了,既然依旧是代码开源,本着学习的精神就下载下来弄弄.但是官网提供的SDK版本只有1.9的,考虑到学习的便利性,因此最好从Source版本开始弄,这样的话以后想 ...

  6. .NET：国际化和本地化

    .NET:国际化和本地化 背景 国际化(i18n)和本地化(l10n)是高端程序的必备技术,可惜从业五年从没有尝试过,下一步准备做一个多用户的博客系统,想支持多语言,今天就学习了一下,写出来,希望大家 ...

  7. mosquitto awareness when before it's being compiling, and you do settings and testing

    Mostly, this clearify the usage of   ' mosquitto.conf ' in easy-understanding language.   1. compile ...

  8. JSP实现页面跳转的方式

    js实现页面跳转的几种方式普通方式 第一种: <script language="javascript" type="text/javascript"&g ...

  9. 根据字节码探讨java自增运算符的原理

    public class Test { static int x, y; public static void main(String args[]) { x++; myMethod(); Syste ...

  10. css透明度(兼容所有浏览器)

    .transparent{ background: rgba(, , , 0.3) !important; /* IE无效,FF有效 */ filter: alpha(opacity=); -moz- ...