圆的旋转功效

Question

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

Answer 1

<div class='rotate'>
      <div class='front'></div>
      <div class='behand'></div></div>

.rotate{  position: relative;  -webkit-perspective:500px;
}.front,.behand {  width: 100px;  height: 100px;  border-radius:100px;  position: absolute;  transition:all 0.8s ease;
}.front {  z-index:1;  background-color: red; 
  transform: rotateY(0deg);
}.behand{  background-color: yellow;
}.rotate:hover .front{  z-index: 0;  transform: rotateY(180deg);
}.rotate:hover .behand{  transform: rotateY(180deg);
}

没写兼容性。