<section class="header">
	<article class="headerBlock"><h1>CSS Flip Card (Content with JS)</h1></article>
</section>

<section class="content">
</section>

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

//== Variables ==//
$gutter: 15px;
$grid: 12;

$black: #000;
$gray: #ddd;
$white: #fff;

//== Mixins ==//
@mixin column($numCol) {
	width: percentage($numCol/$grid);
}

@mixin whiteSpace($space) {
	padding-left: $space;
	padding-right: $space;
}

//== Placeholders ==//
%clearFix {
	&:before, &:after {
		content: "";
    display: table;
	}
	
	&:after {
		clear: both;
	}
}

%commonCol {
	float: left;
	min-height: 1px;
	padding-left: $gutter;
	padding-right: $gutter;
	position: relative;
}

%autoMargin {
	margin-left: auto;
	margin-right: auto;
}

%cardCommon {
	backface-visibility: hidden;
	background-color: $white;
	border-radius: 0.3rem;
	box-shadow: 0.15rem 0.15rem 0.1rem 0 rgba($black, 0.3);
	color: darken($gray, 50%);
	cursor: pointer;
	overflow: hidden;
	transform-style: preserve-3d;	
	transition: 0.75s;	
}

//== Content ==//
*,
*:before,
*:after {
	box-sizing: border-box;
}

html,
body {
	background-color: $gray;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;	
}

html,
body,
h1,
h2,
p {
	margin: 0;
}

.header {
	@extend %autoMargin;
	@extend %clearFix;
	@include whiteSpace(2rem);
	
	height: auto;
	margin-bottom: 1rem;
}

.headerBlock {
	@extend %commonCol;
	@include column(12);
	
	align-items: center;
	display: flex;
	font-size: 2rem;
	height: 5rem;
}

.content {
	@extend %autoMargin;
	@extend %clearFix;
	@include whiteSpace(2rem);
	
	margin-bottom: 5rem;
}

.contentBlock {
	@extend %commonCol;
	@include column(4);
	
	perspective: 50rem;
	perspective-origin: center top;

	img {
		height: auto;
		width: 100%;		
	}
	
	&:hover {
		.cardFrontSide {
			transform: rotateY(-180deg);
		}
		
		.cardBackSide {
			transform: rotateY(0);
		}
	}
}

.cardFrontSide {
	@extend %cardCommon;
	
	height: auto;
	position: relative;
	width: 100%;
}

.cardFrontContent {
	padding: 0.5rem 1rem 1rem;
	
	h2 {
		color: darken($gray, 60%);
		padding-bottom: 0.5rem;		
	}
}

.cardBackSide {
	@extend %cardCommon;
	
	height: 100%;	
	left: $gutter;
	padding: 1rem;
	position: absolute;
	top: 0;
	transform: rotateY(180deg);
	width: calc(100% - (#{$gutter} * 2));
}

//== I'm using this JavaScript only to put the content on the page ==//

//== Estou usando este JavaScript apenas para colocar o conteúdo na página ==//

var card = {
	'front': {
		'img': [			'https://res.cloudinary.com/diegobr/image/upload/v1477491518/forest-01_x48cr1.jpg',			'https://res.cloudinary.com/diegobr/image/upload/v1477491518/fog-01_e2iziy.jpg',	'https://res.cloudinary.com/diegobr/image/upload/v1477491518/lake-01_yrddak.jpg'
		],
		
		'title': [
			'Card 01',
			'Card 02',
			'Card 03'
		],
		
		'content': [
			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique nunc urna. Suspendisse blandit dolor tortor, ut accumsan magna congue ut.',
			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique nunc urna. Suspendisse blandit dolor tortor, ut accumsan magna congue ut.',
			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique nunc urna. Suspendisse blandit dolor tortor, ut accumsan magna congue ut.'
		]
	},
	
	'back': {
		'content': [
			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique nunc urna. Suspendisse blandit dolor tortor, ut accumsan magna congue ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique nunc urna. Suspendisse blandit dolor tortor, ut accumsan magna congue ut.',
			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique nunc urna. Suspendisse blandit dolor tortor, ut accumsan magna congue ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique nunc urna. Suspendisse blandit dolor tortor, ut accumsan magna congue ut.',
			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique nunc urna. Suspendisse blandit dolor tortor, ut accumsan magna congue ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique nunc urna. Suspendisse blandit dolor tortor, ut accumsan magna congue ut.'
		]
	}
};

for (var i = 0; i < card.front.img.length; i++) {
	$('.content').append('\
		<article class="contentBlock">\
			<div class="cardFrontSide">\
				<img src="' + card.front.img[i] + '">\
				<div class="cardFrontContent">\
					<h2>' + card.front.title[i] + '</h2>\
					<p>' + card.front.content[i] + '</p>\
				</div>\
			</div>\
			<div class="cardBackSide">\
				<p>' + card.back.content[i] + '</p>\
			</div>\
		</article>\
											 ');
}