schema hyd&au

index.html

<div class="perspective">
  
  <hr>
  
  <div class="vertical"><hr></div>
  
  <div class="layer layer-02">
    <a href="#">2.<br>ACTIONNEUR</a>
  </div>
  
  <div class="layer layer-01">
    <a href="#">1.<br>TRANSMISSION<br>DE COMMANDE</a>
  </div>
    
  <div class="layer layer-03">
    <a href="#">3.<br>CONTRÔLE<br>COMMANDE</a>
  </div> 
    
    
</div>

schema hyd&au.markdown

schema hyd&au

A Pen by Kompuser on CodePen.

License.

script.js

var toggle = true, layer1 = jQuery('.layer-01'), layer2 = jQuery('.layer-02'), layer3 = jQuery('.layer-03');

layer1.click(function() {
  if(toggle) {
    
   TweenMax.to(layer1, 0.25, { bottom:"0" ,fontSize:"48px", opacity:"1" });
   TweenMax.to(layer2, 0.25, {bottom:"200px" , opacity:"0.5" });
   TweenMax.to(layer3, 0.25, {bottom:"-200px", opacity: "0.5" });
   console.log('--B');

  }else{
  
   TweenMax.to(layer1, 0.25, {bottom:"0",fontSize:"24px" , opacity: "1" });
   TweenMax.to(layer2, 0.25, {bottom:"0" , opacity:"1" });
   TweenMax.to(layer3, 0.25, {bottom:"0", opacity: "1" });
   console.log('B--');
    
  }
  toggle=!toggle;
});

layer2.click(function() {
  if(toggle) {
    
   TweenMax.to(layer2, 0.25, { bottom:"-200px" , fontSize:"48px", opacity:"1"});
   TweenMax.to(layer1, 0.25, {bottom:"-200px" , opacity:"0.5" });
   TweenMax.to(layer3, 0.25, {bottom:"-200px", opacity: "0.5" });
   console.log('--A');

  }else{
  
   TweenMax.to(layer2, 0.25, { bottom:"0" ,fontSize:"24px", opacity:"1"});
   TweenMax.to(layer1, 0.25, {bottom:"0" , opacity:"1" });
   TweenMax.to(layer3, 0.25, {bottom:"0", opacity: "1" });
   console.log('A--');
    
  }
  
  toggle=!toggle;
  
});

layer3.click(function() {
  if(toggle) {
    
   TweenMax.to(layer3, 0.25, { bottom:"200px" ,fontSize:"48px", opacity:"1" });
   TweenMax.to(layer1, 0.25, {bottom:"200px" , opacity:"0.5" });
   TweenMax.to(layer2, 0.25, {bottom:"200px", opacity: "0.5" });
   console.log('--C');

  }else{
  
   TweenMax.to(layer3, 0.25, { bottom:"0" ,fontSize:"24px", opacity:"1" });
   TweenMax.to(layer1, 0.25, {bottom:"0" , opacity:"1" });
   TweenMax.to(layer2, 0.25, {bottom:"0", opacity: "1" });
   console.log('C--');
    
  }
  
  toggle=!toggle;
  
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>

style.scss

body {
  background-color: #2783c2;
  overflow: hidden;
  font-family: "Raleway", sans-serif;
  font-size: 100%;
}

a {
  color: white;
  text-decoration: none;
  font-weight: 700;
}

hr {
  transform:rotateY(45deg) rotateZ(90deg);
  width:1600px;
  margin-top:-6em;
  position: absolute;
  top:6em;
  left:-40em;
  z-index:-1;
  transform-style: preserve-3d;
  border: 0;
  height: 0;
  border-top: 1px solid rgb(255, 255, 255);
    
}

div.vertical hr {
  //transform:rotateZ(90deg);
  transform:rotateX(90deg) rotateZ(90deg) translateZ(-4em);
  top:0;
  left:-18em;
}

.perspective {
  background-color: hsla(0, 0%, 0%, .1);
  background-size: 8em 8em;
  height: 14em;
  left: 35%;
  margin: -8em;
  padding: 3em;
  position: absolute;
  top: 50%;
  width: 14em;
  transform: rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
  perspective: 45000;
}

.layer,
.layer:after,
.layer:before {
  //content: '';
  //float: left;
  height: 8em;
  position: absolute;
  width: 12em;
  font-size: 1.5em;
}


/* Top */

.layer {
  position: relative;
  transform: translateZ(3em);
  transform-style: preserve-3d;
  transition: .25s;
  transform: rotateX(-90deg) translateY(0em) translateZ(-12em);
  transform-origin: 50% 100%;
  border: 1px solid white;
  padding: 1em;
}

.layer-01:hover,
.layer-02:hover,
.layer-03:hover {
  //transform: rotateX(-90deg) translateY(-4em) translateZ(-12em);
}


/* pseudo front */

.layer:before {
  //background-color: #d44;
  //transform: rotateY(90deg) translateX(3em);
  //transform-origin: 100% 0;
}


/* Alternate Colour */

.layer:nth-child(even) {
  background-color: transparent;
}

.layer:nth-child(even):after {
  background-color: transparent;
}

.layer:nth-child(even):before {
  background-color: transparent;
}

.layer:nth-child(odd) {
  background-color: transparent;
}

.layer:nth-child(odd):after {
  background-color: transparent;
}

.layer:nth-child(odd):before {
  background-color: transparent;
}

styles

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />