3-D Split Image - Panorama w/ Reflection 🌊

3-d-split-image-panorama-w-reflection.markdown

3-D Split Image - Panorama w/ Reflection 🌊

A Pen by Chris Simmons on CodePen.

License.

index.jade

.box
  .left.top
    .side
    .reflection
    .overlay
  .center.top
    .side
    .reflection
    .overlay
  .right.top
    .side
    .reflection
    .overlay

style.scss

body {
	perspective: 1100px;
	background: rgba(0, 0, 0, 1);
}

.box {
	position: relative;
	width: 65%;
	margin: 5% auto;
	padding-bottom: 25%;
	transform: rotateY(29deg);
	transform-style: preserve-3d;
	div.top {
		position: absolute;
		top: 0;
		width: 30.3%;
		height: 100%;
		float: left;
		background-image: url('http://www.easypano.com/images/pw/v3/banner.jpg');
		background-size: auto 100%;
		transform-style: preserve-3d;
		outline: 1px solid transparent;
		-webkit-backface-visibility: hidden !important;
		/* prevent jagged edges in firefox */
		&:before {
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(#1abc9c, .15);
		}
	}
	.left {
		left: 0;
		background-position: 0% 0;
	}
	.center {
		left: 34.83%;
		background-position: -100% 0;
	}
	.right {
		left: 69.66%;
		background-position: -197% 0;
	}
	div.top > .side {
		content: '';
		position: absolute;
		top: 0;
		right: 100%;
		width: 10%;
		height: 100%;
		background: url('http://www.easypano.com/images/pw/v3/banner.jpg');
		background-size: auto 100%;
		transform-origin: 100% 50%;
		transform: rotateY(-90deg);
		-webkit-backface-visibility: hidden !important;
		&:before {
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(#1abc9c, .15);
		}
	}
	.left > .side {
		background-position: 0% 0;
	}
	.center > .side {
		background-position: -798% 0px !important;
	}
	.right > .side {
		background-position: -2000.4% 0 !important;
	}
	div.top .reflection {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform-origin: 50% 100%;
		transform: rotateX(-90deg);
		background-image: url('http://www.easypano.com/images/pw/v3/banner.jpg');
		background-size: auto 100%;
		outline: 1px solid transparent;
	}
	.left > .reflection {
		left: 0;
		background-position: 0% 0;
	}
	.center > .reflection {
		left: 34.83%;
		background-position: -100% 0;
	}
	.right > .reflection {
		left: 69.66%;
		background-position: -197% 0;
	}
	.overlay {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 99.7%;
		transform-origin: 50% 100%;
		transform: rotateX(-90deg);
		background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 123%);
		outline: 15px solid black;
	}
}