例子1 :https://www.daconote.com/sample/javascript-trigger-CSS.php
例子2 :https://www.daconote.com/sample/css-test.php
例子3 :如下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> #allbu div{ background-color:#ccc; width:90px; height:20px; margin:5px; } #allbox{ transform-style: preserve-3d; perspective: 300px;/*所有的方塊都共用這個perspective(透視點)*/ } #box1{ background-color:#FF006E; width:150px; height:150px; position:absolute; top:100px; left:200px; } #bu1{ background-color:#ccc; width:90px; height:20px; } </style> <script> function rot(w,h){//這兩個值w和h是對應到按鈕那邊的兩個值 var elem =document.getElementById("box1");//選擇哪一個元件 elem.style.transition = "transform 500ms linear 0s";//套用transform 屬性 持續500毫秒完成動作,延遲0s elem.style.transform = h;//把h的值(由按鈕那邊帶過來的)給transform屬性 } </script> </head> <body> <div id="allbu"><!--用這個div來放所有的按鈕,這樣可以一次設定css屬性--> <div id="bu1" onMouseOver="rot('x','rotateZ(45deg)')" onMouseOut="rot('x','rotateZ(0deg)')">bu1</div> <!--onMouseOver 是滑鼠移上去時要觸發的動作,動作是執行名為rot的函式,並且給定兩個值一個是x,另一個是rotateZ(0deg)--> <div id="bu2" onMouseOver="rot('x',' translate(150px, 0px)')" onMouseOut="rot('x',' translate(0px, 0px)')">bu2</div> <div id="bu3" onMouseOver="rot('x',' rotateY(45deg)')" onMouseOut="rot('x',' rotateY(0deg)')">bu3</div> </div> <div id="allbox"><!--用這個來包覆box1方塊是因為之後要加入其他的方塊可以共用同一個perspective的值--> <div id="box1"></div><!--這是一個方塊--> </div> </body> </html>