css3 div實現三維立體圓環旋轉效果

圓環最好設計為掃描特效，轉起來會很有感覺

 

1、首先創建一個div

<div class="companydiV">
            <img class="imgcompany" src="../../static/img/centerroll.png" alt="">
 </div>

2、css樣式

.companydiV{
    position: absolute;
    top: -130px;
    /* left: 80px; */
    transform: skewY(0) rotateZ(88deg) rotateX(8deg) rotateY(-79deg);
  }

3、css3動畫

@keyframes rollImg {
    0% {
      transform :rotateZ(5deg);
    }
    100% {
      transform :rotateZ(1000deg);
    }
  }
  .imgcompany{
    /* transform: rotate(25deg); */
    animation:2s rollImg linear infinite normal;
    transform: skewX(-45deg);
  }