标签：
首先要说一下，transition属性ie9是不支持的，从ie10才开始支持
例子是当鼠标移上div后，它会旋转180度。
要点：
border-radius设置成50%；transition做动画，将圆形盒子里的图标也跟着转180度 transition只能用一次，否则后面的会覆盖前面的，这时可以将多重样式写在一个transition里，然后用逗号隔开即可<style>.box{width: 100px;height: 100px;border-radius: 50%;//这样圆角占了50%宽高，就成了一个圆box-shadow: 0 0 0 1px black inset;position: relative;transition: box-shadow 0.2s linear 0s,transform 0.2s linear 0s; //将多重样式写在一个transition里，然后用逗号隔开即可}.box:hover{box-shadow:0 0 0 50px black inset;transform: rotate(180deg);}.icon{height: 20%;width: 20%;background: url(3.jpg) no-repeat center center;position: absolute;top: 40px;left: 40px;}</style><script></script></head><body><div class="box"><div class="icon"></div></div></body>
传智CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转
标签：
原文地址：http://www.cnblogs.com/bluefantasy728/p/5522132.html
