通过单击其他某个部门

Question

我有以下两个部门： <div class="left"></div> <div class="left"></div>

div.left
{
  background:orange;
  position: absolute;
  height:200px;
  width:200px;
  margin-left:300px;
  border-radius: 0px 40px 0px 0px;
  z-index:1;
  transition: 1s;
}
div.right
{
  background:blue;
  position:absolute;
  height:200px;
  width:200px;
  margin-left:300px;
  border-radius: 0px 0px 0px 0px;
}
div.left:focus
{
  margin-left: 100px;
  border-radius: 0px 0px 0px 0px;
}

<div class="left" tabindex="0">left page</div>
<div class="right">right page</div>

现在我希望在点击左侧页面时更改右页的宽度和填充。 另外我需要在左页面中使用CSS（尽可能简单，因为我是这个的新手）的翻转动画，使它看起来像一本书。