本文是此連結的源碼。http://www.imooc.com/learn/77
關於的html5的使用：
transition----含義是：過渡的過程，可以對各種屬性設定變化。
有5中過渡的形式：ease、linear、ease-in、ease-out、ease-in-out。
<!DOCTYPE html> <html><head> <title>html5 transition</title> <style type="text/css"> #block_bar1{ width: 40px; height: 100px; background-color: #69c; -webkit-transition:width 5s ease; } #block_bar1:hover{ width: 600px; height: 100px; background-color: #ff0000; } #block_bar2{ width: 40px; height: 100px; background-color: #69c; -webkit-transition:width 5s linear; } #block_bar2:hover{ width: 600px; height: 100px; background-color: #ff0000; } #block_bar3{ width: 40px; height: 100px; background-color: #69c; -webkit-transition:width 5s ease-in; } #block_bar3:hover{ width: 600px; height: 100px; background-color: #ff0000; } #block_bar4{ width: 40px; height: 100px; background-color: #69c; -webkit-transition:width 5s ease-out; } #block_bar4:hover{ width: 600px; height: 100px; background-color: #ff0000; } </style></head><body> <div id="block_bar1"> </div> <div id="block_bar2"> </div> <div id="block_bar3"> </div> <div id="block_bar4"> </div></body> </html>
transform-----含義是：改變，使…變形；轉換，動詞
該行為是html5新增加的一個特性，主要translate（）、rotate（）、scale（）、skew()等屬性可以設定齣動畫。
example1：
<!DOCTYPE html><html><head> <title></title> <style> #test{ -webkit-perspective:800; -webkit-perspective-origin: 50% 50%; -webkit-transform-style:-webkit-preserve-3d; } #block{ width: 500px; height: 500px; background-color: #69c; margin: 100px auto; -webkit-transform:rotateZ(30deg); } </style></head><body> <div id="test"> <div id="block"> </div> </div></body></html>
<!DOCTYPE html><html><head> <title>3dRotate</title> <style type="text/css"> #test{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; -webkit-tranform-style:-webkit-preserve-3d; } #block{ width: 200px; height: 200px; background-color: #6699cc; margin:100px auto; } #option{ margin: 60px auto; font-size: 16px; font-weight: bold; width: 800px; } #option .range-control{width: 700px;} </style> <script type="text/javascript"> function rotate(){ var x=document.getElementById("rotatex").value; var y=document.getElementById("rotatey").value; var z=document.getElementById("rotatez").value; document.getElementById("block").style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)"; document.getElementById("degX-span").innerText =x; document.getElementById("degY-span").innerText =y; document.getElementById("degZ-span").innerText =z; } </script></head><body> <div id="test"> <div id="block"></div> </div> <div id="option"> <p>rotateX:<span id="degX-span">0</span> degree</p> <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" onMouseMove="rotate()" /><br> <p>rotateY:<span id="degY-span">0</span> degree</p> <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control" onMouseMove="rotate()" /><br> <p>rotateX:<span id="degZ-span">0</span> degree</p> <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control" onMouseMove="rotate()" /><br> </div></body></html>
最後一個是3維情境的搭建和翻頁效果：
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #my3dspace{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; overflow: hidden; } #pagegroup{ width: 400px; height: 400px; margin: 0px auto; -webkit-transform-style:preserve-3d; position: relative; } #op{ text-align: center; margin:40px auto; } .page{ width: 360px; height: 360px; padding: 20px; background-color: #000; color: #fff; font-weight: bold; font-size: 360px; line-height: 360px; text-align: center; position: absolute; } #page1{ -webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear; } #page2,#page3,#page4,#page5,#page6{ -webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear; -webkit-transform:rotateX(90deg); } </style> <script type="text/javascript"> var curIndex = 1; function next(){ if(curIndex == 6) return; var curPage = document.getElementById("page"+curIndex); curPage.style.webkitTransform = "rotateX(-90deg)"; curIndex ++; var nextPage = document.getElementById("page"+curIndex); nextPage.style.webkitTransform = "rotateX(0deg)"; } function prev(){ if(curIndex == 1) return; var curPage = document.getElementById("page"+curIndex); curPage.style.webkitTransform = "rotateX(90deg)"; curIndex --; var nextPage = document.getElementById("page"+curIndex); nextPage.style.webkitTransform = "rotateX(0deg)"; } </script></head><body> <div id="my3dspace"> <div id="pagegroup"> <div class="page" id="page1">1</div> <div class="page" id="page2">2</div> <div class="page" id="page3">3</div> <div class="page" id="page4">4</div> <div class="page" id="page5">5</div> <div class="page" id="page6">6</div> </div> </div> <div id="op"> <a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a> </div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
