css3制作3d旋转相册
此处只是记录，解析可见原文：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>
