css 3D相册，旋转木马练习

html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <link rel="stylesheet" href="../css/whirligig.css">
 6 <script src="../js/jquery-2.1.4.min.js"></script>
 7 <title>旋转的木马</title>
 8 <style id="dynamic"></style>
 9 </head>
10 <body>
11   <input type="hidden" id="topPage" value="0">
12   <div id="space3d">
13     <div id="pagegroup">
14       <img class="page page0" id="0" src="../images/cute/1.jpg" alt="夕月">
15       <img class="page page1" id="1" src="../images/cute/2.jpg" alt="绿草">
16       <img class="page page2" id="2" src="../images/cute/3.jpg" alt="夕阳">
17       <img class="page page3" id="3" src="../images/cute/4.jpg" alt="花女">
18       <img class="page page4" id="4" src="../images/cute/5.jpg" alt="冷夜">
19       <img class="page page5" id="5" src="../images/cute/6.jpg" alt="海阳">
20       <img class="page page6" id="6" src="../images/cute/7.jpg" alt="熏衣">
21       <img class="page page7" id="7" src="../images/cute/8.jpg" alt="夕云">
22     </div>
23   </div>
24 
25 <script>
26 $(function(){
27     $(".page").click(function(){
28         // javascript 类选择器..
29     var _topPage = document.getElementById("topPage");
30     var _pagegroup = document.getElementById("pagegroup");
31     var _style = document.getElementById("dynamic"); // 本页面 style
32     var myRules = document.styleSheets[0].rules; // 外部style
33     
34     var topPage = _topPage.value-0;  // 最前面page的id
35     var clickPage = parseInt(this.id); // onclick page
36     console.log("topPage:"+topPage+","+"clickPage"+clickPage);
37     
38     /* 修改外部css, myRules[3].cssText = '.a {color: green;}'; */
39     myRules[3].style.transform = "rotateY("+(clickPage)*45+"deg)"; // 修改外部css
40     
41     /* 修改本页面css */
42     _style.innerHTML = "@-webkit-keyframes rotateYleft{0%{transform:rotateY("+(topPage)*45
43         +"deg);} 100% {transform:rotateY("+((clickPage+7)%8+1)*45+"deg);} }\n";
44     _topPage.setAttribute("value", clickPage);
45     _pagegroup.className = "pagegroup1";
46     window.setTimeout(function(){
47       _pagegroup.className = 'pagegroup2'},1000);
48         
49     })
50 })
51 </script>
52 </body>
53 </html>

css

@CHARSET "UTF-8";

#space3d {
  -webkit-perspective: 2000px;
  prespective:2000px;
  -webkit-perspective-origin: 50% 10%;
  prespective-orogin:50% 10%;
}
#pagegroup {
  position: relative;
  top: 200px;
  margin: 0 auto;
  width: 420px;
  height: 262px;
  transform-style: preserve-3d;
}
.pagegroup1 {
  animation-name: rotateYleft;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.pagegroup2 {
  transform:rotateY(0);
  transition: transform;
}
.page {
  position: absolute;
  width: 420px;
  height: 262px;
  cursor: pointer;
}
.page0 {
   transform: translateZ(600px);
}
.page7 {
  transform: rotateY(45deg) translateZ(600px);
}
.page6 {
  transform: rotateY(90deg) translateZ(600px);
}
.page5 {
  transform: rotateY(135deg) translateZ(600px);
}
.page4 {
  transform: rotateY(180deg) translateZ(600px);
}
.page3 {
  transform: rotateY(225deg) translateZ(600px);
}
.page2 {
  transform: rotateY(270deg) translateZ(600px);
}
.page1 {
  transform: rotateY(315deg) translateZ(600px);
}

 

 

posted @ 2016-03-22 16:48  kkco  阅读(707)  评论(0)  编辑  收藏  举报