首页 > Web开发 > 详细

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

时间:2019-09-06 18:30:53      阅读:741      评论:0      收藏:0      [点我收藏+]

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

 

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

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

原文:https://www.cnblogs.com/tiepeng/p/11476969.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!