场景,项目中需要根据风向显示不同方向的图标,如下图:
我用span标签写的图标,发现并没有旋转。代码如下
<div class="weather-ws">
<span
:style="{transform:item.wsDirect !== 'NaN'? getRorate(item.wsDirect):'rotate(0)'}"
class="wind-direction"
>{{ '➤' }}</span>
{{ item.wsGrade }}
</div>
原因:
主要是行内元素不支持rotate
解决办法:
设置display为inline-block或者block。
.wind-direction {
display: inline-block;
}