HTML5、CSS3实现旋转特效

利用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>