Header rotate

by Elodie Be

HTML

<div id="page">

  <header id="header-desktop">

    <div class="header-nav">
      <a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-1">Panel #1</a>
      <a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-2">Panel #2</a>
    </div><!--/header-nav-->
    
    <div class="header-panel">
		
      <div id="header-panel-1" class="header-panel-submenu is-close">
        <p class="header-panel-title">Panel #1</p>
        <span class="header-panel-close js-flip-header-back">X</span>
			<div class="header-panel-body">
				<p>I am the content of Panel #1<br />Text <a href="#">and links</a> are not accessible under Chrome only !</p>
			</div>
		</div><!--/header-panel-1-->
		
		<div id="header-panel-2" class="header-panel-submenu is-close">
        <p class="header-panel-title">Panel #1</p>
        <span class="header-panel-close js-flip-header-back">X</span>
			<div class="header-panel-body">
				<p>Here again, in the content of Panel #2<br /> I cannot acess Text <a href="#">and links</a>...</p>
			</div>
		</div><!--/header-panel-2-->
    
	</div><!--/header-panel-->
</header><!--/header-desktop-->

<div style="padding:10px;font-size:34px;">
  <p>Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div><!--/content-->
</div><!--/page-->

CSS

* {padding:0; margin:0;} *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

#page { 
  padding-top: 120px; 
  margin: 0 auto; 
  position: relative;
 }

#header-desktop { 
  position: relative; 
  z-index: 999;
  height: 120px;
  width:100%; 
  position: fixed;
  left: 0; 
  right: 0; 
  top: 0;
  transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d; 
  transition:transform .4s linear; 
  -webkit-transition:transform .4s linear;
}
#header-desktop.is-flipped {
  transform:rotateX(90deg);
  -webkit-transform:rotateX(90deg);
}

.header-nav{
  width:100%; 
  height:120px;
  position: relative;
  background: yellow; 
  transform:translateZ(60px); 
  -webkit-transform:translateZ(60px);
  border-bottom: 1px solid #e7e7e7;
}
#header-desktop.is-flipped .header-nav{
  background-color:orange;
}

.header-panel{
  width:100%; 
  height:0;
  position: relative;
  background-color:lime;  
}
#header-desktop.is-flipped .header-panel {
  height:120px;
}

.header-panel-submenu {
  width: 100%; 
  overflow: hidden;
}


.header-panel-submenu:not(.is-close) {
  transform:rotateX(-90deg) translateZ(-60px); 
  -webkit-transform:rotateX(-90deg) translateZ(-60px);
    
}

.header-panel-title {
  margin: 0;
  line-height: 120px;
}
.header-panel-close {
  position: absolute;
  right: 36px; 
  top: 48px; 
  cursor: pointer;
}
.header-panel-body {
  background-color: pink; 
  position: absolute; 
  top: 120px; 
  left: 0; 
  right: 0;
  padding:30px 10px;
}

JavaScript

jQuery(document).ready(function($) {
	    $(".js-flip-header").click(function() {
	        $("#header-desktop").toggleClass("is-flipped");
	    });
	    $(".js-flip-header-back").click(function() {
	    	$(this).closest('.header-panel-submenu').addClass("is-close")
	        $("#header-desktop").removeClass("is-flipped");
	    });
	});
  
  
  $(document).ready(function(){
  $('.js-target-submenu').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('.js-target-submenu').removeClass('is-close');
    $('.header-panel-submenu').removeClass('is-close');
    $(this).removeClass('is-close');
    $("#"+tab_id).removeClass('is-close');
  })
})