圆的旋转功效

Question

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

Answer 1

翻牌效果，一搜一大堆

Answer 2

<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);
}

没写兼容性。

Answer 3

transform:rotate 是这个吗？还是什么样子的？