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

html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body
{
	background: pink;
}

.container
{
	height: 100vh;
	position: relative;
	display: flex;
	align-items: center;
	/* justify-content: center; */
}

.page:nth-of-type(odd)
{
  transform: rotateY(180deg);
  right: calc(50vw - 17px);
  transform-origin: right;
}

.page:nth-of-type(even)
{
  transform-origin: left;
  left: 50vw;
}

.page
{
	
	position: absolute;
	width: 300px;
	height: 450px;
	background: white;
	
	transition: transform ease-in-out 1.5s;
	border: 1px black solid;
	padding: 20px;
	backface-visibility: hidden;
}

.page img
{
	max-width:100%;
}

.open2 {
	transform: rotateY(0deg) !important;
}

.open{
	transform: rotateY(180deg);
}