Реализовать html-страницу со створками

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.wrap { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  position: relative; 
   
  perspective: 1000px; 
} 
 
h1 { 
  position: absolute; 
  z-index: -1; 
} 
 
.door { 
  width: 300px; 
  height: 300px; 
 
  background-color: #212121; 
 
  transition: all 1s; 
} 
 
.door_left { 
  transform-origin: left; 
} 
 
.door_right { 
  transform-origin: right; 
} 
 
.wrap:hover > .door_left { 
  transform: rotateY(50deg); 
} 
 
.wrap:hover > .door_right { 
  transform: rotateY(-50deg); 
}

<div class="wrap"> 
  <div class="door door_left" ></div> 
  <div class="door door_right" ></div> 
  <h1>УХОДИ</h1> 
</div>

html, 
body { 
  margin: 0; 
  padding: 0; 
  perspective: 1400px; 
} 
 
.btn { 
  width: 30px; 
  height: 30px; 
  background: #cc0000; 
  position: absolute; 
  top: 20px; 
  left: 20px; 
  z-index: 10; 
} 
 
.left { 
  width: 50%; 
  height: 100vh; 
  max-height: 600px; 
  background: #ccc; 
  position: absolute; 
  left: 0; 
  top: 0; 
  transition: 0.35s ease-in; 
} 
 
.right { 
  width: 50%; 
  height: 100vh; 
  max-height: 600px; 
  background: #ccc; 
  position: absolute; 
  right: 0; 
  top: 0; 
  transition: 0.35s ease-in-out; 
} 
 
#ch:checked~.left { 
  -moz-transform: rotateY(65deg); 
  width: 30%; 
} 
 
#ch:checked~.right { 
  -moz-transform: rotateY(-65deg); 
  width: 30%; 
}

<label> 
 
  <input type="checkbox" id="ch" class="btn"> 
 
<div class="left"></div> 
<div class="right"></div> 
</label>

* { 
  margin: 0; 
  padding: 0; 
  outline: none; 
} 
 
body { 
  overflow-X: hidden; 
  perspective: 600px; 
} 
 
.panel { 
  width: 300px; 
  height: 100vh; 
  background: #ddd; 
  position: absolute; 
  transform: translate(-300px, 0); 
  transition: .5s; 
  padding-top: 30px; 
  z-index: 100; 
} 
 
.button { 
  width: 50px; 
  height: 50px; 
  position: absolute; 
  left: 100%; 
  top: 5px; 
} 
 
.slash { 
  width: 60%; 
  height: 8px; 
  background: #000; 
  margin: 4px auto; 
} 
 
.panel:focus { 
  transform: translate(0, 0); 
} 
 
.panel .item { 
  width: 80%; 
  margin: auto; 
  font-size: 14px; 
  font-family: Georgia; 
} 
 
.content { 
  width: 80%; 
  margin: auto; 
  transition: .5s; 
  padding: 30px; 
} 
 
.panel:focus~.content { 
  transform: translate(200px, -30px)rotateY(-40deg); 
  color: #ccc; 
  opacity: .8; 
}

<div class="panel" tabindex="-1"> 
  <div class="button"> 
    <div class="slash"></div> 
    <div class="slash"></div> 
    <div class="slash"></div> 
  </div> 
  <div class="item"> 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima qui ipsum autem consequatur vel non quisquam inventore earum libero vitae officia eligendi, explicabo ipsa molestiae ullam quo reprehenderit, ad dignissimos unde officiis nihil veritatis? 
    Velit aliquam molestiae earum explicabo neque. 
  </div> 
</div> 
 
<div class="content"> 
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias neque quasi velit vero natus expedita fuga cum quisquam doloribus quas ut libero aliquam eum, optio et sint sit animi nemo voluptatibus quia! Impedit, voluptatum! Voluptas eveniet reiciendis 
  et! Accusamus ipsum molestiae consectetur adipisci illum mollitia ex ducimus tempore earum aspernatur totam iusto harum sed perferendis voluptatibus dolorem, consequuntur nobis nihil odit corrupti? Ducimus, ab at! Quam hic deleniti quae quisquam harum 
  inventore consectetur earum sapiente quod! Veniam deleniti accusamus rem odio nihil vel aspernatur eum modi non delectus dignissimos deserunt nam voluptatum, molestiae et obcaecati, voluptates atque nobis eius. Ullam ipsam eos eaque tempora dolore odio 
  itaque ea ad? Reprehenderit voluptatibus dolor enim beatae fugiat, voluptates non distinctio laboriosam dolores molestiae sint perferendis quia quod. Eaque molestias voluptatem, modi veritatis sequi voluptates accusamus nam nobis et suscipit. Repellendus 
  placeat error quibusdam deleniti ab iure, eos aspernatur nulla ex dicta enim fugiat optio sed inventore tenetur est? Necessitatibus culpa adipisci maiores ab voluptatem ipsa possimus minima maxime, ex ipsam unde cum fugit numquam, explicabo eligendi 
  eos totam exercitationem itaque modi. Obcaecati earum optio eum reiciendis! Labore, veritatis eligendi eveniet delectus fuga magnam cupiditate quaerat itaque, unde suscipit dolorum eos repellat? Recusandae, dicta error! Quaerat voluptatem officia, laborum 
  fugiat vero praesentium, hic porro saepe esse reiciendis ratione a sapiente animi. Minus, itaque. Facilis autem non rerum. Quibusdam, quos doloremque rem reprehenderit odio delectus molestias eveniet sapiente consectetur vitae deserunt officiis optio 
  sed consequuntur magnam provident. Eos sint nostrum odio hic ex magnam vero rem eius culpa! Doloribus, nihil. Magnam ab a repellendus officiis provident facilis quasi, rem commodi iusto fugit esse maxime incidunt, quae ut aliquam recusandae hic omnis 
  atque similique dicta beatae nihil! Consectetur facilis soluta nesciunt, reiciendis repellendus magni odio id natus sunt libero doloribus ipsa a quibusdam, perferendis impedit. 
</div>