有一张gif图片,非常符合项目的需求,但是图片的方向不对,如下图:
,而我需要是这样的:
解决方案:通过CSS平移旋转后即可达到效果,html如下:
<div class="my-auto" style="margin-left: 20%">
<img :alt="title" src="../../../assets/images/bg2.gif" class="bg2Class" />
</div>
css代码如下:
.bg2Class {
position: absolute;
left: 30%;
top: 30%;
animation: rotoImg 10s linear infinite;
width: 300px;
height: 300px;
}
@keyframes rotoImg {
from {
transform: rotateY(180deg);/*绕Y轴旋转180度*/
}
to {
transform: rotateY(180deg);
}
}