首页 > 代码库 > css3制作3d旋转相册

css3制作3d旋转相册

2024-08-23 04:39:12   219人阅读

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

 

css3制作3d旋转相册


联系
我们