Skewed page blocks (transform)

by PhilQ

HTML

<main>

<section class="page">
	<div class="page-background" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=100&bg=0CFF0C&txtclr=ffffff&txt=1500%20%C3%97%201500%0Apx&w=1500&h=1500');"></div>
	<div class="page-content">
Donec in orci sit amet ipsum efficitur pharetra ac id erat. Nam urna magna, tincidunt ac nunc vitae, sagittis fringilla ipsum. Etiam fermentum laoreet imperdiet. Integer pharetra bibendum nisi varius fermentum. Sed imperdiet lorem in sem hendrerit, et tincidunt ex porta. Sed nisi nulla, commodo sed augue tempus, efficitur elementum ligula. Quisque ac scelerisque justo, eget viverra odio. Suspendisse vitae faucibus est. Maecenas neque turpis, egestas ut ante non, consequat mollis massa. Suspendisse in massa nisi. Maecenas nec ullamcorper erat. Ut auctor augue eros, id scelerisque elit auctor ut. Suspendisse faucibus enim nunc, sit amet cursus nisi varius et. Suspendisse sit amet nunc velit. Duis luctus ipsum non velit egestas, ac congue nisl tincidunt. Suspendisse rutrum maximus ex, id malesuada lectus facilisis at.
	</div>
</section>
<section class="page">
	<div class="page-background" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=100&bg=FF0C0C&txtclr=ffffff&txt=1500%20%C3%97%201500%0Apx&w=1500&h=1500');"></div>
	<div class="page-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget fringilla neque. Curabitur ornare mauris eget tempus egestas. Fusce pellentesque fringilla nibh, aliquam auctor urna consectetur in. Praesent quis commodo augue. Fusce ut nisl sagittis, tempor mi sed, posuere purus. Donec quis nisl orci. Integer efficitur molestie nulla, a fringilla ligula ullamcorper sed. Nulla id erat ac risus maximus varius ut rhoncus tellus. Integer maximus finibus mauris, eget blandit nulla tristique eget. In laoreet id nisi posuere suscipit. Aliquam viverra vitae risus ac convallis. Praesent in euismod neque. Duis id arcu ac lacus finibus ornare eu quis eros. Interdum et...

SCSS

html,body{margin:0px;padding:0px;}
body{
	*,:before,:after{
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
	}
	font-size: 18px;
	line-height: 1.4;
}

$skewAngle: 3deg;
$xMargin: 50px;
$yMargin: 50px;

main {
	position: relative;
	display: block;
	width: 100%;
	padding-top: $yMargin;
	overflow: hidden;

	section.page {
		position: relative;
		display: block;
		overflow: hidden;
		transform-origin: 50% 50%;
		padding: 0px $xMargin;
		margin-top: -2 * $yMargin;
		margin-left: -$xMargin;
		margin-right: -$xMargin;

		> .page-content {
			z-index: 1;
			display: block;
			width: 100%;
			max-width: 1020px;
			transform-origin: 50% 50%;
			padding: (2 * $yMargin) 0px (3 * $yMargin);
			margin: -$yMargin auto 0px;
		}
		
		> .page-background {
			display: inline-block;
			position: absolute;
			top: -$yMargin;
			left: 0px;
			width: 100%;
			height: calc(100% + #{$yMargin});
			background-color: transparent;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			z-index: -1;
		}
		
		&:first-of-type {
			padding-top: 0.8 * $yMargin;
			> .page-background {
				top: 0px;
			}
		}
		
		&:last-of-type {
			margin-bottom: -1 * $yMargin;
			> .page-content {
				padding-bottom: 1.8 * $yMargin;
			}
		}

		&:nth-child(odd) {
			transform: rotate( $skewAngle );
			> .page-content, > .page-background {
				transform: rotate( -$skewAngle );
			}
		}
		&:nth-child(even) {
			transform: rotate( -$skewAngle );
			> .page-content, > .page-background {
				transform: rotate( $skewAngle );
			}
		}
	}

	footer {
		position: relative;
		background: yellow;
		display: block;
		width: 100%;
		min-height: (2 * $yMargin);
	}
}