* {
	padding:0;
	margin:0;
}
body,html {
	background:#f0f0f0;
}
:root {
	--width:600px;
	--height:400px;
}
.content {
	width:600px;
	margin:100px auto;
}
.box {
	position:relative;
	perspective:500px;
	background:#fff;
	overflow:hidden;
	height:var(--height);
	float:left;
}
.box>div {
	position:absolute;
	top:calc(50% - var(--height) / 2);
	height:var(--height);
	transform-style:preserve-3d;
	transition:.5s;
}
.box>div>div {
	position:absolute;
	width:var(--width);
	height:var(--height);
}
.box-1 {
	width:var(--width);
	right:calc(50% - var(--width) / 2);
	transform:translateZ(calc(-1 * var(--width) / 2));
}
.box-4 {
	width:var(--width);
	right:calc(50% - var(--width) / 2);
	transform:translateZ(calc(-1 * var(--width) / 2));
}
.box-2 {
	width:var(--height);
	right:calc(50% - var(--height) / 2);
	transform:translateZ(calc(-1 * var(--height) / 2));
}
.box-3 {
	width:var(--height);
	right:calc(50% - var(--height) / 2);
	transform:translateZ(calc(-1 * var(--height) / 2));
}
.box-1 .img,.box-4 .img {
	transform:rotateY(   0deg ) translateZ(calc(var(--width) / 2));
}
.box-2 .img,.box-3 .img {
	transform:rotateY(   0deg ) translateZ(calc(var(--height) / 2));
	width:var(--height)
}
.box .text {
	background:rgb(226,113,113);
}
.box-1 .text {
	transform:rotateY(  90deg ) translateZ(calc(var(--width) / 2));
}
.box-2 .text {
	transform:rotateX(  -90deg ) translateZ(calc(var(--height) / 2));
	width:var(--height)
}
.box-3 .text {
	transform:rotateX(  90deg ) translateZ(calc(var(--height) / 2));
	width:var(--height)
}
.box-4 .text {
	transform:rotateY(  -90deg ) translateZ(calc(var(--width) / 2));
}
.box-1 .img {
	background:rgba(66,153,205,1);
}
.box-2 .img {
	background:rgb(77,173,228);
}
.box-3 .img {
	background:rgb(65,162,218);
}
.box-4 .img {
	background:rgb(60,143,190);
}
.box-1:hover {
	transform:translateZ(calc(-1 * var(--width) / 2)) rotateY(-90deg);
}
.box-2:hover {
	transform:translateZ(calc(-1 * var(--height) / 2)) rotateX(90deg);
}
.box-3:hover {
	transform:translateZ(calc(-1 * var(--height) / 2)) rotateX(-90deg);
}
.box-4:hover {
	transform:translateZ(calc(-1 * var(--width) / 2)) rotateY(90deg);
}