Adding rotating elements to your Squarespace 7.1 website is a creative way to introduce a dynamic, interactive, and playful vibe to your design.

In this step-by-step tutorial, we’ll show you how to effortlessly rotate images on your site using custom CSS, empowering you to enhance your visuals and captivate your audience with ease.

Option 01:

How to rotate a single image

1. In Edit Mode, add an image block in placement of choice

2. From your Squarespace dashboard, go to:

Pages > Scroll down to Website Tools > Custom CSS

3. Copy & paste the CSS in the box below:

//ROTATE IMAGE

@keyframes turn {
  from { transform: rotate(0deg) }

  to { transform: rotate(360deg) }
}

#BLOCK-ID-HERE {
animation: turn 10s linear infinite;
}

How to update the block ID:

Block ID’s target the specific blocks on your website.

Here is an example of a block ID: #block-2c64c469358a23b66a91

To identify block ID’s, there’s an easy to use Google Chrome extension that will magically show you Block ID’s for every section on your website with the click of a button.

Add the Chrome plugin to your toolbar, open your website, and click the grid icon on the top right corner to enable the extension. You will immediately see the red block ID’s for all of the blocks on your site.

Click on the red sticker associated with the image you’d like to add a border, and the block ID will automatically be copied to your clipboard.

4. Update #BLOCK-ID-HERE with the block ID copied to your clipboard

5. Save!

Option 02:

How to rotate all circle shape images on your website

1. In Edit Mode, all an image block in placement of choice

2. Click the pen icon to edit the image block

3. Go to the Design tab > Shape > Select circle

4. From your Squarespace dashboard, go to:

Pages > Scroll down to Website Tools > Custom CSS

5. Copy & paste the CSS in the box below:

//ROTATING CIRCLE IMAGES SITEWIDE

.sqs-block-image div[data-shape-mask="circle"] img {
@keyframes turn {
  from { transform: rotate(0deg) }

  to { transform: rotate(360deg) }
}
 animation: turn 10s linear infinite;
}

5. Save!

All set!

Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!

* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!