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.