I'm struggling to create responsive images with a rotation angle of 10 degrees. However, the height is increasing too much and the image is not centered or covering the full width.
This is what I have so far: (colors are set as background-image). As you can see, the rotation is causing issues where the top and bottom sides are not fully filled, and my overall height is expanding too much.
https://i.sstatic.net/fPpS8.jpg
*Here is the CSS code I'm using:
.rotate > div {
transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.rotate > div > div > div {
transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.full {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.list {
position: relative;
width: 100%;
height: 100%;
}
.item {
height: 50%;
}
.wrapper {
width: 100%;
height: 100%;
}
Any help or suggestions would be greatly appreciated!