Make an image rotate on page scroll

I’m trying to connect the rotation of an object to the scroll.
Here’s how cargo tells you to rotate an image: start by opening Code View while editing a page; then wrap the element you want to rotate with a div that has the class ‘rotate’.

<div class=”rotate”></div>

and then add this to the CSS:

.rotate {
display: inline-block;
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}

@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Is there a way to connect this rotation to the page scrolling?