Rotate featured product

[AvyCoffee]

I am trying to get my featured product to rotate on my home page. I want it to continuously rotate. I have entered custom code and apparently I'm not doing it correctly. I've created a custom rotate.js in my assets, I've wrapped my <img> in <div>, I've added 

.product__media--featured {
transition: transform 0.5s ease;
}

.product__media--featured:hover {
transform: rotate(5deg);
}
at the bottom of my base.css - what am I missing here?

I am using the Dawn theme.

Any help would be greatly appreciated!

[BSSCommerce-B2B · Accepted solution]

@AvyCoffee, change  the selector in your rotate.js file like this

 const featuredImage = document.querySelector('.featured-product .product-media-container .product__media');

[BSSCommerce-B2B · Accepted solution]

@AvyCoffee, change  the selector in your rotate.js file like this

 const featuredImage = document.querySelector('.featured-product .product-media-container .product__media');

[AvyCoffee]

EDIT**

This worked! Thank you so much! Now I just need to adust the timing so it's not so choppy.

[BSSCommerce-B2B · Accepted solution]

@AvyCoffee, to make it smoother, you should change your whole custom fuction like this

document.addEventListener('DOMContentLoaded', function() {
    const featuredImage = document.querySelector('.featured-product .product-media-container .product__media');
    if (featuredImage) {
        let angle = 0;
        setInterval(() => {
            angle += 1; // Rotate by 1 degree for smoother rotation
            featuredImage.style.transform = `rotate(${angle}deg)`;
        }, 20);
    }
});

If it helps you, please like and mark it as the solution.

Best Regards 😍

[AvyCoffee]

You are brilliant! Thank you so much.

[BSSCommerce-B2B]

Glad to help you 😊