Rotate multiple images

You have one row and four columns

And then you rotate it and you dynamically adapt and you get two columns

Implementation method

1. Put display:flex on the outer div;

2. Write a margin for each img while rotating

The following code

Click getRotateType(className, marginLeft, marginTop, IsRotate = true) {// Absolute value of rotation sceneImgCurrent Const num = math.abs (this.sceneimgCurrent); document.querySelectorAll(className).forEach(item => { if(isRotate) { item.style.transform = `rotate(${this.sceneImgCurrent}deg)`; } // Margin if((num/90)%2 === 0) {item.style.marginleft = 0; item.style.marginTop = 0; } else { item.style.marginLeft = marginLeft; item.style.marginTop = marginTop; }}); },Copy the code