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);
}
愿做一只蜗牛,一步一步爬上理想的金字塔···