Rotate on Hover - Animation Idea #12

I was recently asked about rotating an icon on hover so I decided I would add this to my growing list of animation ideas with a little write up.

As with other ideas of this sort - it requires adding some code in two areas.

1. CSS code will go in the Branding and Look area of your admin panel
2. HTML code will go in your widget

We will use the HTML to place an icon and the CSS to spin it when you hover over it with the mouse.

Here is a look at the end result.

In this example, we’re just making the icon rotate by 180 degrees. It isn’t much but it is something that adds a little extra to the otherwise mundane to try making them a bit more interesting.

Here is the CSS

/** This block will rotate the object with an ID of spinner by 180 degrees **/
/** This rotation will happen when hovered over **/
/** Adjust the amount of rotation as desired **/

#spinner:hover {
  transform: rotate(180deg);
}

Here is the HTML for the widget.

<!-- This code places a font awesome star icon on the screen and sets the size -->
<!-- It is important to assign the ID of spinner so it is tied to the CSS -->
<!-- Adjust the size as desired -->

<div>
<i class="fa fa-star" id="spinner" style="font-size:24px;"></i>
</div>

Want to add a link?

Here is a little extra code to make that rotating icon have a link

<!-- This code adds a link to the icon -->
<!-- It also adds some text and applies a little spacing for the text -->
<!-- Adjust the size, spacing, and link as desired -->

<div>
<a href="https://www.docebo.com">
  <i class="fa fa-star" id="spinner" style="font-size:24px;margin-right:5px;"></i>
  Docebo
</a>
</div>

Of course, you could do some more with styling of the star and link itself but I was trying to make this a very minimal code approach.

Hopefully this is useful for someone today.

@ndeanes - thanks for the idea!

EDIT:

As another *spin-off* of this idea… you could rotate your entire widget.

All you need is some CSS for that but you will need to search out the specific IDs needed to narrow your selection.

Here is an example. In this case it is a custom content widget.

/** This code will rotate an entire widget **/
/** Degree of rotation drastically reduced to 5 degrees **/

#doc-page-33 #doc-widget-169:hover {
  transform: rotate(5deg);
}