CSS – Why do my images get a vertical scroll bar after rotating?

So I’m trying to rotate a couple of images to create a design, however after applying rotation to one of the images, a vertical scroll bar appears all over the div and I don’t know why. Can anyone explain why?

My code is:

HTML:

    <div class="three-images">
        <img src="images/PP_E-shot_electrical-control-and-automation.jpg" class="first-image" alt="">
        <img src="images/PP_E-shot_electronics-assembly.jpg" class="second-image" alt="">
        <img src="images/PP_E-shot_cable-harnesses.jpg" class="third-image" alt="">
    </div>

CSS:

.three-images{
    display: flex;
    margin: 0 auto;
    img{
        flex: 0 0 33%; 
    }
    .first-image{
    padding: 0;
    }
    .second-image{
        transform: rotate(7deg) translate(-25px, 0);
    }
    .third-image{
        transform: rotate(deg);
    }
}

Leave a Reply

Your email address will not be published.