Header rotate

by Elodie Be

HTML

<div id="page">

  <header id="header-desktop" class="has-transition">

    <div class="header-nav has-transition">
      <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 has-transition">
		
      <div id="header-panel-1" class="header-panel-submenu  has-transition">
        <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  has-transition">
        <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;
 }

.has-transition {
  -webkit-transition: all .4s 0s;
  -moz-transition: all .4s 0s; 
  -ms-transition: all .4s 0s; 
  -o-transition: all .4s 0s; 
  transition: all .4s 0s;
}

#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:120px;
  position: relative;
  background-color:lime; 
  transform:rotateX(-90deg) translateZ(-60px); 
  -webkit-transform:rotateX(-90deg) translateZ(-60px);
}
.header-panel-submenu {
  width: 100%; 
  overflow: hidden;
  height: 0;
}
.header-panel-submenu.is-open {
  height: 100%;
}

.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').removeClass("is-open")
	        $("#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-open');
    $('.header-panel-submenu').removeClass('is-open');
    $(this).addClass('is-open');
    $("#"+tab_id).addClass('is-open');
  })
})