html部分:
<div class="outScale">
<div class="innerRotate">
<img src="" alt="暂无图片"/>
</div>
</div>
当一个图片既要实现旋转需求,又要实现放大需求,但是transform属性不能同时写scale和rotate,这怎么办
解决方案是:
在图片外套两层div。
advice:外层的scale,里面的rotate不然显示效果有点weird
css部分:
.outScale{
transition: transform 1.2s;
&:hover{
transform: scale(1.5);
}
}
.innerRotate{
&0{
transform: rotate(0deg);
}
&90{
transform: rotate(90deg);
}
&180{
transform: rotate(180deg);
}
&270{
transform: rotate(270deg);
}
}
注:采用sass语法,不清楚看文档:https://www.sass.hk/