https://github.com/elattar-ayoub/overlord-3d-cards

I created a 3D Overlord cards for Overlord characters from the light novel using Html, Css and JavaScript.
https://github.com/elattar-ayoub/overlord-3d-cards

anime css css3 html javascript

Last synced: 9 days ago
JSON representation

I created a 3D Overlord cards for Overlord characters from the light novel using Html, Css and JavaScript.

• Host: GitHub
• URL: https://github.com/elattar-ayoub/overlord-3d-cards
• Owner: ELATTAR-Ayoub
• Created: 2021-06-06T03:00:10.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-29T02:11:58.000Z (over 3 years ago)
• Last Synced: 2024-11-14T23:32:37.524Z (2 months ago)
• Topics: anime, css, css3, html, javascript
• Language: HTML
• Homepage:
• Size: 2.24 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Overlord-3D-Cards

I created a 3D Overlord cards for Overlord characters from the light novel using Html, Css and JavaScript.

## How the code works?

The code is very simple:

- **Html** is used to create the webpage and contains the information about the characters, in the border level where it shows the *[Racial level]* + *[Job level]*, working with tables was a pain, so I created some divs and designed them with Css to match the border level in the light novel.

- **Css** is used to design html elements. There are the main *Style.css* file which is used to design the general elements across all htmls, and there are other css files for the specific element, also used to set the transition.

- **JS** is used to give the 3D look for our cards. I called the element I wanted to move to make the card look 3D, and I translate there X and Y and added a small rotating for the images, all that happens when the user'mouse enter the parent element which is the 'container' and the card return back to its normal form when the user's mouse leave the 'container'.

## The characters

The characters that I covered until now are:

- **Ainz**.

- **Albedo**.

- **Shalltear bloodfallen**.

## CodePen:

**Link:** https://codepen.io/elattar-ayoub/pen/OJmJQZp