Fork, Commit, Merge - Hard Issue (CSS)

[nikohoffren]

Fork, Commit, Merge - Hard Issue (CSS)

Design a 3D rotating card effect

Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

How to get started

Open the tasks/css/hard directory from the root of your project.

In this directory, there is card.html which has all the necessary card-classes added for you.
Your task is to implement the 3D rotating card effect similar in video in card.css file.
So when the mouse hovers over the card, it turns around to back-side, and when the mouse leaves the card, it turns back to front-side. There is no need to use JavaScript on this issue, just plain CSS.
Note: You should only need to modify the card.css file.

Example

fork-commit-merge-css-hard.mp4

Colors

• Use #ff9f00 for the color of the front-side of the card.
• Use #4caf50 for the color of the back-side of the card.

Additional Resources

• CSS Animations (MDN Web Docs)
• Cross-Browser Testing Tools

---

If you are using VS Code and have for example Live Server extension, you can simply open card.html with the server and check if the rotating effect looks similar as in the video. If it does, you are ready to make a pull request!
If you do not have Live Server extension, you'll find information about installing and how to use it here.

---

Check out README.md for more instructions and how to make a pull request.

Feel free to ask any questions here if you have some problems!

Also, kindly give this project a star to enhance its visibility for new developers!