3D Flip Card is an effect built with CSS. This effect causes the card or element to rotate.

The purpose of using this effect on the card was to learn more about 3D animations and transitions with CSS.

I will briefly tell you about some things I learned doing this 3D Flip Card project. Before explaining how I learned it is important to talk about what the Flip Cards effect is.

The 3D flip card effect allows us to make an element rotate.

Think like you have a card, that card has the front and the back, right?

If you want to see the back of the card, you'll need to rotate it so you can see what's behind it. And it is precisely this effect that I created on the card.

Now that we understood a little bit about the Flip card effect, I will briefly explain what I learned about creating this effect.

• perspective: This property allows us to create a depth space, that is, the distance between the element and the user.
• transform-style: This property defines whether the child elements are in 3D space. The transform-style property has a value, called preserve-3d, which allows us to position child elements in 3D space.
• transform: This property allows us to make the element spin, for example. And to do that, we need a function of the tranform property itself called rotate(), which allows us to rotate the elements on the X or Y axis.

Pull requests are welcome. For major changes, open a competition question first what you would like to change.

Developed by Leticia Dias