點擊預覽javascript
<!DOCTYPE html> <html> <head> <style> #div { cursor:pointer; position:relative; margin:30px; width:200px; height:30px; background-color:yellow; /* Rotate div */ transition:height 0.5s; } #div h4{ position:absolute; top:-15px; left:10px; transform:rotate(0deg); -ms-transform:rotate(0deg); /* Internet Explorer */ -moz-transform:rotate(0deg); /* Firefox */ -webkit-transform:rotate(0deg); /* Safari 和 Chrome */ -o-transform:rotate(0deg); /* Opera */ transition:transform 0.2s; } </style> </head> <body> <div id="div" onclick="div()" onmouseout="out()"> <h4 id="h">></h4></div> </body> <script language="javascript"> function div(){ document.getElementById("h").style.transform="rotate(90deg)"; document.getElementById("div").style.height="300px"; } function out(){ document.getElementById("h").style.transform="rotate(0deg)"; document.getElementById("div").style.height="30px"; } </script> </html>
點擊預覽html