此处只是记录，解析可见原文：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>
时间： 2024-07-31 06:32:31