用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 让其进行旋转