3D flip card effect in CSS3 | Web Development Complete Course | itbaba
In this video, I want to tell about the tutorial of “3D flip card in CSS3”.
Now let’s learn how to create “3D flip card”.First; you will take the main div with the class and will style with width, height, margin, and float.Now create div of front and back.both div will inside the main div.
Then go to style that which is applied to head tag.Give some attributes like width, height, position, background, border,border-radius.
You can also give border shadow for animation, you will give transition,backface-visibility and transform.
The transition is used for the duration.Backface visibility will be taken “hidden” because if one face will be shown then the other one will hide.
The card is rotated according to given angel.
Now you will give hover to the back and front div.
In hover, you will take transform opposite from the above setting i-e; negative for front and positive for the back.The value will also be opposite if you will give value zero in the front setting.
Then in hover, you will give _180° value while you Will give 180° value in back setting then you will give 0° values in hover for the back.
In the result, your card will move on 180° like the flip card.
I hope you will achieve better knowledge of “3D flip card effect in CSS3 | Web Development Complete Course” from this video.
You can Watch our Previous tutorials for Web Development.
Visit and Subscribe To My channel “Technical College”.
Channel URL: http://quainator.com/2Qy9
Hit the subscribe button to get notification of new video.You can also follow me on other social media.Visit our official website: https://itbaba.net/
Like us on Facebook Page: https://www.facebook.com/TechnicalCollege1/
You can Join our Facebook Group: https://www.facebook.com/groups/161467174423746/
Google Plus: https://plus.google.com/109731336769713097481
Thanks for watching this Video.