旋转多张图片

现有一行四列

旋转之后动态适应，变成两列

实现方法

1.给外层div写上display:flex;

2.旋转的时候给每个img写上margin

代码如下

// 封装图片旋转-点击事件触发

getRotateType(className, marginLeft, marginTop, isRotate = true ) {
    // 这里取旋转的绝对值 sceneImgCurrent记录旋转的度数
   
    const num = Math.abs(this.sceneImgCurrent);
    document.querySelectorAll(className).forEach(item => {
        if(isRotate) {
            item.style.transform = `rotate(${this.sceneImgCurrent}deg)`;
        }
        
        // 图片纵向排列的时候 取消margin, 横向排列的时候 加margin 
        if( (num/90)%2 === 0) {
            item.style.marginLeft = 0;
            item.style.marginTop = 0;
        } else {
            item.style.marginLeft = marginLeft;
            item.style.marginTop = marginTop;
        }
    });
},