Layout issues when assigning full width to the css

I created three divs up down and show inside a main div. I am applying perspective property to up and down div using onclick event. I want my up div to have 100vw and height 400px. Same for the down div the width should be 100vw and height should be the rest of the the window. My current snippet is working fine but when I change parameter according to the parameters I specify above my page doesn't perform the respective rotation as expected. I think I am not correctly using the css positioning.

$( "#click" ).click(function() {
    $('#up').css({'transform-style': 'preserve-3d', 'transform': 'rotateX(45deg)', 'transition': 'all 3s ease-in-out'}),
	 $('#down').css({'transform-style': 'preserve-3d', 'transform': 'rotateX(-45deg)', 'transition': 'all 3s ease-in-out'})
    });
* {margin:0; padding:0;}

#main{
  position: relative;
    height: 150px;
    width: 150px;
    
   
    -webkit-perspective: 100px; /* Safari 4-8  */
    perspective: 100px;
}

#up{
padding: 50px;
    position: absolute;
    margin-top: 17px;
    background-color: red;
 
}

#down{
 position: blue;
  
    background-color: blue;
}

  #show{  z-index: -1;
    position: absolute;
    margin-top: 21px;
    margin-left: 26px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="main">
<div id="up">
<p>raghav</p>
</div>
<div id="show">
<p>show me</p>
</div>
<div id="down">
<p>patnecha</p>
</div>
</div>
<button id="click">click me</button>

csscss3

Answers

comments powered by Disqus