HTML5CSS3专题：诱人的实例3D旋转木马效果相册实例源码

共14个文件

jpg：9个

html：2个

css：2个

HTML5

CSS3

图片轮播

5星 · 超过95%的资源需积分: 40 2.4k 浏览量 2014-07-12 15:03:05 上传评论 27 收藏 5.7MB RAR 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源推荐

资源详情

资源评论

收起资源包目录

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

<!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>

评论收藏

内容反馈