/* *****************************************************************
GENERALITIES
***************************************************************** */

article + article {
	margin-top: 2em;
}

h2,
h3 {
	margin-top: 0;
}
.box {
	width: 240px;
	margin: 5em auto;
	padding: 1em;
	background-color: #fc3;
}

/* *****************************************************************
TRANSFORM
***************************************************************** */

.test-transform-translate {
	transform-origin: 50% 50%;
	transform: translateX(10em);
}
.test-transform-scale {
	transform-origin: 50% 50%;
	transform: scale(0.5);
}
.test-transform-rotate {
	transform-origin: 50% 50%;
	transform: rotate(45deg);
}
.test-transform-skew {
	transform-origin: 50% 50%;
	transform: skewX(15deg);
}
.test-transform-multiple {
	transform-origin: 50% 50%;
	transform: translateX(10em) scale(0.5) rotate(45deg);
}

/* *****************************************************************
TRANSITION
***************************************************************** */

.test-transition {
	transition: all 1s;
}
.test-transition:hover {
	background-color: #3cf;
	transform: scale(2);
	cursor: pointer;
}

/* *****************************************************************
ANIMATION
***************************************************************** */

@keyframes newspaper { 
	from { 
		transform: scale(0) rotate(720deg); 
	} 
	to {
		transform: scale(1) rotate(0);
	} 
}
.test-animation {
	background-color: #9c3;
	animation: newspaper 1s;
}