I have made a square box and rotated it 45 degrees but unwanted wavering occurs during scrolling the page. https://i.stack.imgur.com/1kkQ2.png

The box div in the SKILLS section is wavering during scrolling the page. I don't want any wavering during scrolling.

s-items{
    padding: 8rem 0;
    display:grid;
    grid-template-columns: auto auto auto auto;
    justify-content: space-around;
    grid-row-gap: 12rem;
}
.s-item-box{
    padding: 4rem;
    width: 15rem;
    height: 15rem;
    box-shadow: 1px 2px 24px 2px var(--orange);
    background-color: #fff;
    border-radius: 1rem;
    position: relative;
    transform: rotate(45deg);
}

Skills.css

.s-item-box:hover{
    transform: scale(1.1) rotate(45deg);
    cursor: pointer;

}
.s-item{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(-45deg);
}
.s-title{
    font-size: 1.6rem;
    color: #777;
}

Skills.js

<div className='s-item-box'>
    <div className='s-item'>
        <FaReact style={{ color: reactColor, fontSize: "6rem" }} />
        <span className='s-title'>ReactJS</span>
    </div>
</div>

Please fix the problem.