rotate position:absolute

by Qwerty_Wasd

HTML

<div class="sidebar">
<ul>
<li><a href="#">FIRST</a></li>
<li><a href="#">SECOND</a></li>
<li><a href="#">THIRD</a></li>
</ul>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias rerum ut numquam sint provident, at sit reiciendis, voluptate! Quaerat quia eos ullam dolorum architecto quam inventore animi sunt tempora et!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias rerum ut numquam sint provident, at sit reiciendis, voluptate! Quaerat quia eos ullam dolorum architecto quam inventore animi sunt tempora et!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias rerum ut numquam sint provident, at sit reiciendis, voluptate! Quaerat quia eos ullam dolorum architecto quam inventore animi sunt tempora et!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias rerum ut numquam sint provident, at sit reiciendis, voluptate! Quaerat quia eos ullam dolorum architecto quam inventore animi sunt tempora et!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias rerum ut numquam sint provident, at sit reiciendis, voluptate! Quaerat quia eos ullam dolorum architecto quam inventore animi sunt tempora et!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias rerum ut numquam sint provident, at sit reiciendis, voluptate! Quaerat quia eos ullam dolorum architecto quam inventore animi sunt tempora et!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias rerum ut numquam sint provident, at sit reiciendis, voluptate! Quaerat quia eos ullam dolorum architecto quam inventore animi sunt tempora et!</div>

CSS

body{overflow-x:hidden;}
.sidebar,.content{position:absolute;border:1px solid red;height:100%;}
a{text-decoration:none;color:white;cursor:pointer;padding-left:15px;}
.sidebar{background:black;color:white;width:100px;top:0;right:-90px;transition:2s;}
.content{top:0;right:10px;transition:2s;}
.sidebar:hover{right:0;transition:2s;}
.sidebar:hover~.content{top:0;right:100px;transition:2s;}