首頁猿問圓的旋轉功效

圓的旋轉功效

JavaScript

慕虎7371278 2018-10-13 10:13:20

最近項目中有個圓的旋轉功效；也就是這個圓有兩個面一個前面和背面；是豎立旋轉的那種；旋轉180度可以前面變成背面；背面變成前面；有沒有做過的朋友給點思路；這里我要的是加載頁面時候能夠自動旋轉不是翻牌的效果

查看完整描述

1 回答

胡子哥哥

TA貢獻1825條經(jīng)驗獲得超6個贊

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

沒寫兼容性。

反對回復 2018-11-12