Estoy tratando de colocar dos imágenes una encima de la otra, y hacer que una de ellas gire en el desplazamiento mientras que la otra no gira, lo que funciona, excepto que no puedo colocar y escalar mis elementos en mi CSS. Tan pronto como empiezo a desplazarme, la imagen con el JS salta a la esquina mientras que la otra permanece donde está. Creo que es porque mi JS sobrescribe mis propiedades CSS, pero ¿hay alguna forma de solucionar esto? ¿Puedo colocar mis dos elementos mientras mantengo mi JS?
var elem = document.getElementById("rotatelogo"); window.addEventListener('scroll', function() { var value = window.scrollY * 0.25; elem.style.transform = `translatex(-50%) translatey(-50%) rotate(${value}deg)`; }); body { height: 200vh; background: darkblue; } .guide { width:150px; height:150px; margin-top:50px; margin-bottom:-300px; margin-left:50px; } <div class="guide" style="position:relative"> <img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" style="position:fixed;"/> <img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" style="position:fixed"/> </div>Elimina la traducción de tu código.
var elem = document.getElementById("rotatelogo"); window.addEventListener('scroll', function() { var value = window.scrollY * 0.25; elem.style.transform = `rotate(${value}deg)`; }); body { height: 200vh; background: darkblue; } .guide { width:150px; height:150px; margin-top:50px; margin-bottom:-300px; margin-left:50px; } <div class="guide" style="position:relative"> <img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" style="position:fixed;"/> <img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" style="position:fixed"/> </div>No estoy seguro de lo que quiere lograr usando translatex(-50%) translatey(-50%) , pero esto hace que el centro de imágenes se coloque en la esquina superior izquierda del elemento principal. Si solo usa elem.style.transform = `rotate(${value}deg)`; girará en su lugar.