css animation 图片65%角旋转,沿着z轴旋转

用css实现图片斜侧着沿着z轴旋转效果

一、原始图

一、最终效果图

底部图片例子：

一、html代码

 <div class="active-box" v-show="index == activeIndex">
    <img src="../assets/imgs/home/photosphere.png" class="active-img" />
</div>

二、css

 .active-box{
          width: 280px;
          height: 280px;
          //沿着x轴旋转65度
          transform: rotate3d(1, 0, 0, 65deg); //rotate3d(x,y,z,angle)
          img{
            width: 100%;
            height: 100%;
            animation: zhuan 10s infinite linear;
          }
   }
 @keyframes zhuan {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

总结

• 将图片先摆放到到合适的角度 transform: rotate3d(x,y,z,angle)
• 再使用 animation 让其进行旋转