face-up card game

index.pug

main
	.cards
		.card-container
			.card.front
			.card.back
		.card-container
			.card.front
			.card.back
		.card-container
			.card.front
			.card.back
		.card-container
			.card.front
			.card.back
	button.start Start
aside

playground.json

{
  "scripts": [
    "jquery"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

script.js

$(".card-container").click(function(){
	$(this).toggleClass("flipped")
})

style.scss

body {
	display: flex;
	flex-direction: row;
	min-height: 100vh;
	font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
	main {
		display:flex;
		flex-direction: column;
		flex-grow:1;
		.cards {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			//grid-template-columns: repeat(4,1fr);
			place-items: center;
			grid-gap: 2rem;
			perspective: 100rem;
			margin:2rem;
			height:10rem;
			.card-container {
				width:100%;
				perspective: 50rem;
				height:10rem;
				cursor: pointer;
				transition:.25s;
				transform-origin: 50% 0%;
				&:before {
					content:'';
					display: block;
					padding-right: 70.71%;
				}
				.card {
					position: absolute;
					top:0;
					height:10rem;
					width:7.071rem;
					border-radius: 1rem;
					transform:rotateY(0deg);
					transition:.5s;
					backface-visibility:hidden;
					&.front {
						background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/mattparker.png) #C8415C no-repeat;
						background-size: 60%;
						background-position: center;
					}
					&.back {
						background:#323133;
						transform:rotateY(180deg);
					}
				}
				&.flipped {
					.card {
						&.front {
							transform:rotateY(180deg);
						}
						&.back {
							transform:rotateY(360deg);
						}
					}
				}
				&:hover {
					transform:rotateY(0deg) rotateX(10deg);
				}
			}
		}
		.start {
			margin:0 2rem 2rem 2rem;
			background:#2ECC71;
			border:none;
			border-radius: 1rem;
			font-size: 2rem;
			padding:.5rem;
			color:white;
			cursor: pointer;
		}
	}
	aside {
		width:10rem;
		background:#F5F7FA;
	}
}