Create Stunning Fan-Like Hover Animation with CSS

Introduction

In this project, you will learn how to create a fan-like effect using CSS. By rotating and scaling a series of div elements, you will be able to achieve a dynamic and visually appealing animation that expands when the user hovers over the element.

👀 Preview

🎯 Tasks

In this project, you will learn:

How to rotate div elements using CSS transforms
How to scale div elements to create the fan-like expansion effect
How to coordinate the rotation and scaling of multiple elements to achieve the desired animation

🏆 Achievements

After completing this project, you will be able to:

Use CSS transforms to rotate and scale elements
Create dynamic hover effects using CSS
Coordinate the animation of multiple elements to achieve a specific visual effect

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CodingStandardsandBestPracticesGroup(["`Coding Standards and Best Practices`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/CodingStandardsandBestPracticesGroup -.-> css/comments("`Comments`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-299847{{"`CSS Fan-Like Hover Animation Effect`"}} css/colors -.-> lab-299847{{"`CSS Fan-Like Hover Animation Effect`"}} css/transformations -.-> lab-299847{{"`CSS Fan-Like Hover Animation Effect`"}} css/comments -.-> lab-299847{{"`CSS Fan-Like Hover Animation Effect`"}} css/pseudo_classes -.-> lab-299847{{"`CSS Fan-Like Hover Animation Effect`"}} end

Set Up the Project Structure

To get started, open the editor on the right. You should see two files — index.html and style.css from your editor.

Click "Go Live" in the bottom right corner to open port 8080 to preview the index.html page in the browser, the element will not expand when the mouse is over it, the effect will be as follows:

Rotate the Divs

In this step, you will learn how to rotate the 12 div elements on the page to create the fan-like effect.

Open the style.css file in your editor.
Add the following CSS rules to the file:

#box:hover div:nth-child(6) {
  transform: rotate(-10deg);
}

#box:hover div:nth-child(5) {
  transform: rotate(-20deg);
}

#box:hover div:nth-child(4) {
  transform: rotate(-30deg);
}

#box:hover div:nth-child(3) {
  transform: rotate(-40deg);
}

#box:hover div:nth-child(2) {
  transform: rotate(-50deg);
}

#box:hover div:nth-child(1) {
  transform: rotate(-60deg);
}

#box:hover div:nth-child(7) {
  transform: rotate(10deg);
}

#box:hover div:nth-child(8) {
  transform: rotate(20deg);
}

#box:hover div:nth-child(9) {
  transform: rotate(30deg);
}

#box:hover div:nth-child(10) {
  transform: rotate(40deg);
}

#box:hover div:nth-child(11) {
  transform: rotate(50deg);
}

#box:hover div:nth-child(12) {
  transform: rotate(60deg);
}

These rules rotate the first 6 div elements (id="item1"~id="item6") counterclockwise with a minimum rotation angle of 10 degrees and a difference of 10 degrees between adjacent elements. The next 6 div elements (id="item7"~id="item12") are rotated clockwise with a minimum rotation of 10 degrees and a difference of 10 degrees between adjacent elements.

Save the style.css file.
Go back to the browser and refresh the page. You should now see the fan-like effect when you hover over the element.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.

CSS Fan-Like Hover Animation Effect