This demo learned from Kevin Powell's youtube
My demo Github
STEP1:
HTML
The card has two sides that contain some content.
STEP2:
CSS
The Font is imported from Google Fonts.
Transform style is preserved-3d which is a fancy way of transitions.
When hovering, the card will rotate 0.5 turns with y-axis.
Each side of the card is transformed preserve-3d.
backface-visibility: hidden The backside of the card will hide.
Card_front: before is a border of the front and translate with Z-axis, which will look like different layers(same as z-index).
And contents are all transformed same way.
This is a concise layout of a flip card with transform.
More demo related
👉Follow me for more useful web development content! love sharing🥰
