JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
 <div class="hover"></div>
 <section id="main"> 
	  <header></header>
	  <main>главный вывод новости</main>
	  <footer></footer>
	<setion>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  background: #333;
  overflow: hidden;
}

.hover {
  flex: 1 1 50px;
  max-width: 50px;
  cursor: pointer;
}

#main {
  flex: 1 1 auto;
  background: #fff;
  padding: 5px;
  transition: transform .3s ease;
}

header,main,footer {
  border: 1px solid #eee;
  margin: 3px;
  height: 100px;
}

.hover:hover + #main {
  transform: perspective(600px) rotateY(-30deg) translateX(100px);
}