SitePoint Code Challenge: CSS - Flip A Card

Ever play Memory as a kid? It’s a card game – you place all the cards face down and when it’s your turn you flip over two cards. The aim is to get matching pairs. Today’s challenge uses CSS & JavaScript to recreate that game that stole so much of my childhood. Before I go any further though, I need to point out that I’ve been a bit remiss in not crediting the creation of these challenges to forum mentor Michael Morris.

Here’s our HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Memory</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript">
    $('.card').click(function(){
	  $(this).toggleClass('down');
	});
  </script>
</head>
<body>
  <div id="Playfield">
    <div data-face="1"></div>
    <div data-face="2"></div>
    <div data-face="3"></div>
    <div data-face="4"></div>
    <div data-face="5"></div>
    <div data-face="6"></div>
    <div data-face="7"></div>
    <div data-face="8"></div>
    <div data-face="9"></div>
    <div data-face="10"></div>
    <div data-face="11"></div>
    <div data-face="12"></div>
    <div data-face="1"></div>
    <div data-face="2"></div>
    <div data-face="3"></div>
    <div data-face="4"></div>
    <div data-face="5"></div>
    <div data-face="6"></div>
    <div data-face="7"></div>
    <div data-face="8"></div>
    <div data-face="9"></div>
    <div data-face="10"></div>
    <div data-face="11"></div>
    <div data-face="12"></div>
  </div>
</body>
</html>

Now, this challenge is broken in two. The CSS side of the challenge is to do the following:

Beginner Level
Style the shape of the cards, their backs and fronts. Respond to Javascript toggling the presence of ‘down’ – if the class is present the card should be face down.
Your styling must tolerate Javascript changing the position of the card in the DOM or absolute positioning of the card.

Javascript will also be applying a class of ‘matched’ to the cards when the player successfully matches a pair. You need to style for this (perhaps by changing the border color). To test your styling you’ll need to manually edit the HTML (or do the JS challenge).

Advanced and Expert Levels
Animate the flip using a 3D transition.

If you have Javascript programming skills there is a tie in challenge in the Javascript forum. If not, why not hit up someone that does and make it a team challenge?

Note – the data-face attribute is present to make the JS code easier to write, although it’s redundant to the final CSS class name. It’s possible to style on attributes, but browser support for that trick is unreliable. Both are presented to keep the difficulty of the challenge down some.

You can follow the challenge and get the solution here.

Frequently Asked Questions about CSS Flip Cards

How can I make the front of the CSS flip card smaller than the back?

To make the front of the CSS flip card smaller than the back, you can adjust the width and height properties of the front card in your CSS. For instance, if the back card is set to a width and height of 300px, you can set the front card to a width and height of 250px to make it smaller. However, keep in mind that this might create a border-like effect around your front card, as the back card will still be visible behind it.

Why is the back of my CSS flip card not showing when flipped?

If the back of your CSS flip card is not showing when flipped, it could be due to a few reasons. One common issue is that the back face visibility property is not set correctly. Make sure to set backface-visibility: hidden; for the front card and backface-visibility: visible; for the back card. Another issue could be the rotation. Ensure that the back card is rotated 180 degrees on the Y-axis.

How can I add a 3D effect to my CSS flip card?

To add a 3D effect to your CSS flip card, you can use the transform-style property in your CSS. By setting transform-style: preserve-3d; on the card container, you can create a 3D effect when the card is flipped. This property ensures that the 3D transformations are visible.

Can I add animations to my CSS flip card?

Yes, you can add animations to your CSS flip card using the transition property in your CSS. This property allows you to specify the speed of the flip animation. For example, transition: transform 0.8s; will create a flip animation that lasts 0.8 seconds.

How can I make my CSS flip card flip on hover?

To make your CSS flip card flip on hover, you can use the :hover pseudo-class in your CSS. In the :hover style rule for the card container, you can specify the transform property to rotate the card 180 degrees on the Y-axis. This will create a flip effect whenever the card is hovered over.

Can I use CSS flip cards on a responsive website?

Yes, CSS flip cards can be used on a responsive website. You can use media queries in your CSS to adjust the size and layout of the flip cards based on the screen size. This ensures that the flip cards look good on all devices, from desktops to mobile phones.

How can I add content to the back of my CSS flip card?

You can add content to the back of your CSS flip card in the HTML. Inside the div for the back card, you can add any content you want, such as text, images, or links. This content will be displayed when the card is flipped.

Why is my CSS flip card not flipping smoothly?

If your CSS flip card is not flipping smoothly, it could be due to the transition property not being set correctly. Make sure to specify a duration for the transition to ensure a smooth flip animation. For example, transition: transform 0.8s; will create a smooth flip animation that lasts 0.8 seconds.

Can I add a border to my CSS flip card?

Yes, you can add a border to your CSS flip card using the border property in your CSS. You can specify the width, style, and color of the border. For example, border: 2px solid black; will add a 2px wide black border to the card.

How can I change the color of my CSS flip card?

You can change the color of your CSS flip card using the background-color property in your CSS. You can specify any color you want for the front and back of the card. For example, background-color: blue; will make the card blue.