翻牌效果，一搜一大堆

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

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

没写兼容性。

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