<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
// alert( 120 / Math.tan(20 / 180 * Math.PI)) 329...;
var transform = function (element, value, key)
{
key = key || "Transform";
["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix)
{
element.style[prefix + key] = value;
});
return element;
}
$(function ()
{
var deg = -40 , i = 1;
$("#container").click(function ()
{
transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")
});
});
</script>
<style type="text/css">
img
{
width: 128px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
position: absolute;
bottom: 0;
}
#stage
{
width: 900px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
padding: 100px 50px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-transform:perspective(800px) ;
position: relative;
}
#container
{
width: 128px;
height: 100px;
margin-left: -64px;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -webkit-transform 1s;
-ms-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
position: absolute;
left: 50%;
}
img:nth-child(0)
{
-webkit-transform: rotateY(0deg) translateZ(300px);
-moz-transform: rotateY(0deg) translateZ(300px);
-ms-transform: rotateY(0deg) translateZ(300px);
}
img:nth-child(1)
{
-webkit-transform: rotateY(40deg) translateZ(300px);
-moz-transform: rotateY(40deg) translateZ(300px);
-ms-transform: rotateY(40deg) translateZ(300px);
}
img:nth-child(2)
{
-webkit-transform: rotateY(80deg) translateZ(300px);
-moz-transform: rotateY(80deg) translateZ(300px);
-ms-transform: rotateY(80deg) translateZ(300px);
}
img:nth-child(3)
{
-webkit-transform: rotateY(120deg) translateZ(300px);
-moz-transform: rotateY(120deg) translateZ(300px);
-ms-transform: rotateY(120deg) translateZ(300px);
}
img:nth-child(4)
{
-webkit-transform: rotateY(160deg) translateZ(300px);
-moz-transform: rotateY(160deg) translateZ(300px);
-ms-transform: rotateY(160deg) translateZ(300px);
}
img:nth-child(5)
{
-webkit-transform: rotateY(200deg) translateZ(300px);
-moz-transform: rotateY(200deg) translateZ(300px);
-ms-transform: rotateY(200deg) translateZ(300px);
}
img:nth-child(6)
{
-webkit-transform: rotateY(240deg) translateZ(300px);
-moz-transform: rotateY(240deg) translateZ(300px);
-ms-transform: rotateY(240deg) translateZ(300px);
}
img:nth-child(7)
{
-webkit-transform: rotateY(280deg) translateZ(300px);
-moz-transform: rotateY(280deg) translateZ(300px);
-ms-transform: rotateY(280deg) translateZ(300px);
}
img:nth-child(8)
{
-webkit-transform: rotateY(320deg) translateZ(300px);
-moz-transform: rotateY(320deg) translateZ(300px);
-ms-transform: rotateY(320deg) translateZ(300px);
}
img:nth-child(9)
{
-webkit-transform: rotateY(360deg) translateZ(300px);
-moz-transform: rotateY(360deg) translateZ(300px);
-ms-transform: rotateY(360deg) translateZ(300px);
}
</style>
</head>
<body>
<div id="stage">
<div id="container">
<img src="imgs/1.jpg"/>
<img src="imgs/2.jpg"/>
<img src="imgs/3.jpg"/>
<img src="imgs/4.jpg"/>
<img src="imgs/5.jpg"/>
<img src="imgs/6.jpg"/>
<img src="imgs/7.jpg"/>
<img src="imgs/8.jpg"/>
<img src="imgs/9.jpg"/>
</div>
</div>
</body>
</html>
HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册实例源码
5星 · 超过95%的资源 需积分: 40 113 浏览量
2014-07-12
15:03:05
上传
评论 27
收藏 5.7MB RAR 举报 
06_3d_xuanzhuanmuma.rar （14个子文件） 
06_3d_xuanzhuanmuma zhy css 
reset.css 546B main.css 0B jquery-1.8.3.js 261KB
index.html 5KB index2.html 4KB imgs 
8.jpg 351KB 2.jpg 300KB 1.jpg 221KB 6.jpg 427KB 3.jpg 1.41MB 5.jpg 442KB 4.jpg 241KB 9.jpg 1.35MB 7.jpg 1.28MB
- 1
- 2
- 3
- 4
- 5
- 6
前往页