Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Transform Rotate

CSS Transform:Rotate - means transform (or change) the image by "rotating" it. On this page you will learn how to add a simple mouseover effect. You can make an image (or button) rotate when a user rolls their mouse over the image. This is just a fun way to add some animation to your web pages.

Be sure to target your item with a class name or class ID because the last thing you want is to rotate every single image on your web page!

How To Rotate Image on Rollover

When you want all of your images to flip the same direction you can use the class name to set the style.

HTML orange tent CSS blue tent JavaScript yellow tent Code green tent

HTML

html code example of images in the aside element

CSS

css code for selecting nested elements

Flip Images Different Directions - Using Class IDs

When you want your images to flip different directions then you need to create a unique class ID to each item that you want to flip and then define the animation to that class ID.

HTML orange tent CSS blue tent JavaScript yellow tent Code green tent

HTML

html code example of images in the aside element

CSS

css code for selecting nested elements

RESULTS

NOTES


After you complete the video, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write "I rotated an image!". But if you still don't understand something, please write that in your comments too so that we know what topics need an additional video tutorial.

Rotating HTML elements can be fun and add great interaction on your web pages. Play around with the different property values for at least one hour before moving on.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved