圆的旋转功效

Question

最近项目中有个圆的旋转功效；也就是这个圆有两个面一个前面和背面；是竖立旋转的那种；旋转180度可以前面变成背面；背面变成前面；有没有做过的朋友给点思路；这里我要的是加载页面时候能够自动旋转不是翻牌的效果

Answer 1

<div&nbsp;class='rotate'> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class='front'></div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class='behand'></div></div>.rotate{&nbsp;&nbsp;position:&nbsp;relative;&nbsp;&nbsp;-webkit-perspective:500px; }.front,.behand&nbsp;{&nbsp;&nbsp;width:&nbsp;100px;&nbsp;&nbsp;height:&nbsp;100px;&nbsp;&nbsp;border-radius:100px;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;transition:all&nbsp;0.8s&nbsp;ease; }.front&nbsp;{&nbsp;&nbsp;z-index:1;&nbsp;&nbsp;background-color:&nbsp;red;&nbsp; &nbsp;&nbsp;transform:&nbsp;rotateY(0deg); }.behand{&nbsp;&nbsp;background-color:&nbsp;yellow; }.rotate:hover&nbsp;.front{&nbsp;&nbsp;z-index:&nbsp;0;&nbsp;&nbsp;transform:&nbsp;rotateY(180deg); }.rotate:hover&nbsp;.behand{&nbsp;&nbsp;transform:&nbsp;rotateY(180deg); }没写兼容性。