css3 div实现三维立体圆环旋转效果

Posted 2022-10-05 tiepeng

圆环最好设计为扫描特效，转起来会很有感觉

 

1、首先创建一个div

<div class="companydiV">
            <img class="imgcompany" src="../../static/img/centerroll.png" >
 </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);