Tiny CSS Projects

9 Creating a virtual credit card

This chapter covers

• Using Flexbox and position in layout
• Working with background images and sizing
• Loading and applying local fonts
• Using transitions and the backface-visibility property to create a 3D effect
• Working with additional styles such as the text-shadow and border-radius properties

As we saw in chapter 3, animation in CSS opens lots of opportunities to create interactive web experiences. In chapter 3, we used animations to give users the sense that something was happening in the background as they waited for a task to complete. Now we’ll use animation to respond to users’ interactions and create a flip effect for a credit card image. On one side, the animation will show the front of a credit card; ...