Hice un cuadro cuadrado y lo giré 45 grados, pero se producen oscilaciones no deseadas durante el desplazamiento de la página. https://i.stack.imgur.com/1kkQ2.png

El cuadro div en la sección HABILIDADES está oscilando durante el desplazamiento de la página. No quiero ninguna vacilación durante el desplazamiento.

 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>

Por favor solucione el problema.