用 javascript 觸發 CSS 屬性

例子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>

Daco Note

用 javascript 觸發 CSS 屬性