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>