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);} } "; 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; 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; 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); }
