实现图片旋转木马3D浏览效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 transform实现图片旋转木马3D浏览效果 </title>
<link rel="stylesheet" href="../css/demo.css" type="text/css">
<style>
.stage_area {
width: 900px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
padding: 100px 50px;
background-color: #f0f0f0;
box-shadow: inset 0 0 3px rgba(0,0,0,.35);
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
-webkit-transition: top .5s;
position: relative;
top: 0;
}
.container {
width: 200px;
height: 100px;
margin-left: -64px;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
left: 50%;
}
.piece {
width: 200px;
box-shadow: 0 1px 3px rgba(0,0,0,.5);
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s, -moz-transform 1s;
transition: opacity 1s, transform 1s;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="main">
<h1>CSS3 transform实现图片旋转木马3D浏览效果实例页面</h1>
<div id="body" class="light">
<div id="content" class="show">
<div class="demo">
<div id="stage" class="stage_area">
<div id="container" class="container" style="-webkit-transform: rotateY(-760deg);">
<img id="piece1" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="piece" style="-webkit-transform: rotateY(0deg) translateZ(195.83855484509584px);">
<img id="piece8" src="http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg" class="piece" style="-webkit-transform: rotateY(40deg) translateZ(195.83855484509584px);">
<img id="piece3" src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" class="piece" style="-webkit-transform: rotateY(80deg) translateZ(195.83855484509584px);">
<img id="piece4" src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" class="piece" style="-webkit-transform: rotateY(120deg) translateZ(195.83855484509584px);">
<img id="piece6" src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" class="piece" style="-webkit-transform: rotateY(160deg) translateZ(195.83855484509584px);">
<img id="piece7" src="http://image.zhangxinxu.com/image/study/s/s128/mm7.jpg" class="piece" style="-webkit-transform: rotateY(200deg) translateZ(195.83855484509584px);">
<img id="piece10" src="http://image.zhangxinxu.com/image/study/s/s128/mm10.jpg" class="piece" style="-webkit-transform: rotateY(240deg) translateZ(195.83855484509584px);">
<img id="piece13" src="http://image.zhangxinxu.com/image/study/s/s128/mm13.jpg" class="piece" style="-webkit-transform: rotateY(280deg) translateZ(195.83855484509584px);">
<img id="piece15" src="http://image.zhangxinxu.com/image/study/s/s128/mm15.jpg" class="piece" style="-webkit-transform: rotateY(320deg) translateZ(195.83855484509584px);">
</div>
</div>
</div>
</div>
</div>
<script>
(function () {
if (typeof window.screenX === "number") {
// 随机颜色HSL
var randomHsl = function () {
return "hsla(" + Math.round(360 * Math.random()) + "," + "60%, 50%, .75)";
}
// CSS transform变换应用
, transform = function (element, value, key) {
key = key || "Transform";
["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix) {
element.style[prefix + key] = value;
});
return element;
}
// 浏览器选择器API
, $ = function (selector) {
return document.querySelector(selector);
}, $$ = function (selector) {
return document.querySelectorAll(selector);
};
// 显示图片
var htmlPic = '', arrayPic = [1, 8, 3, 4, 6, 7, 10, 13, 15], rotate = 360 / arrayPic.length;
arrayPic = [
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-292/58-126800-000-292_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-155/58-126800-000-155_200X76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-180/58-126800-000-180_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-056/58-126800-000-056_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-151/58-126800-000-151_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-150/58-126800-000-150_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-176/58-126800-000-176_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-156/58-126800-000-156_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-Z00-902/58-126800-Z00-902_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-555/58-126800-000-555_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-055/58-126800-000-055_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-149/58-126800-000-149_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-Z00-904/58-126800-Z00-904_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-293/58-126800-000-293_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-063/58-126800-000-063_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-291/58-126800-000-291_200x76.png"
]
var aa = 0;
arrayPic.forEach(function (i) {
htmlPic = htmlPic + '<img id="piece' + aa + '" src="' + arrayPic[aa] + '" class="piece" />';
aa++;
});
// 元素
var eleStage = $("#stage"), eleContainer = $("#container"), indexPiece = 0;
// 元素
var elePics = $$(".piece"), transZ = 64 / Math.tan((rotate / 2 / 180) * Math.PI);
eleContainer.innerHTML = htmlPic;
eleContainer.addEventListener("click", function () {
transform(this, "rotateY(" + (-1 * rotate * ++indexPiece) + "deg)");
});
aa = 0;
arrayPic.forEach(function (i, j) {
transform($("#piece" + aa), "rotateY(" + j * rotate + "deg) translateZ(" + (transZ + 130) + "px)");
aa++;
});
setInterval(function () { transform(eleContainer, "rotateY(" + (-1 * rotate * ++indexPiece) + "deg)"); }, 2000);
} else {
alert("window.screenX === 'number'");
}
})();
</script>
</body>
</html>
