利用CSS3的transiton屬性，進行控制元件的旋轉，並通過設定旋轉時間，實現特效。

效果連線：http://runjs.cn/detail/vkmy8obr

例項程式碼：直接複製進html執行即可 無需引入其他檔案

<style>
  	.dh {
  		width: 100px;
  		height: 100px;
  		position: relative;
  	}
  	.dh:before, .dh:after {
  		content: "";
  		width: 100px;
  		height: 16px;
  		border-radius: 8px;
  		background-color: #000;
  		position: absolute;
  		transition: all 0.15s ease-in-out;  /*設定旋轉持續時間*/
  		-webkit-transition: all 0.15s ease-in-out;/*相容性處理等同於上程式碼*/
  	}
  	.dh:before {
  		top: 0;
  		box-shadow: 0 42px #000;
  	}
  	.dh:after {
  		bottom: 0;
  	}
  	.dh:hover:before {
  		top: 42px;
  		box-shadow: none;
  	    transform: rotate(225deg);/*順時針旋轉225度*/
  	    -webkit-transition: rotate(225deg);/*相容性處理等同於上程式碼*/
  	}
  	.dh:hover:after {
  		bottom: 42px;
  		transform: rotate(135deg);/*順時針旋轉135度*/
  		-webkit-transition: rotate(135deg);/*相容性處理等同於上程式碼*/
  	}
  </style>
  <div class="dh"> 
  </div>