A Pen by NeatNait.

index.html

<h1>example</h1>

<ul class="full height reverse">
  <li>
    <span data-title="who we are">who we are</span>
  </li>
  <li>
    <a href="#"><span data-title="what we do">what we do</span></a>
  </li>
  <li>
    <a href="#"><span data-title="share the love">share the love</span></a>
  </li>
  <li>
    <a href="#"><span data-title="about us">about us</span></a>
  </li>
  <li>
    <a href="#"><span data-title="want to contactus?">want to contactus?</span></a>
  </li>
</ul>



<h1>variations</h1>

<ul>
  <li>
    <span data-title="no link">no link</span>
  </li>
  <li>
    <a href="#"><span data-title="with Link">with Link</span></a>
  </li>
</ul>

<ul class="no-background">
  <li>
    <span data-title="no link">no link</span>
  </li>
  <li>
    <a href="#"><span data-title="with Link">with Link</span></a>
  </li>
</ul>

<ul class="rotate middle half height">
  <li>
    <span data-title="no link">no link</span>
  </li>
  <li>
    <a href="#"><span data-title="with Link">with Link</span></a>
  </li>
</ul>

<ul class="rotate middle full height">
  <li>
    <span data-title="no link">no link</span>
  </li>
  <li>
    <a href="#"><span data-title="with Link">with Link</span></a>
  </li>
</ul>

<ul class="rotate bottom half height">
  <li>
    <span data-title="no link">no link</span>
  </li>
  <li>
    <a href="#"><span data-title="with Link">with Link</span></a>
  </li>
</ul>

<ul class="rotate bottom full height">
  <li>
    <span data-title="no link">no link</span>
  </li>
  <li>
    <a href="#"><span data-title="with Link">with Link</span></a>
  </li>
</ul>

<ul class="rotate bottom disappear">
  <li>
    <span data-title="no link">no link</span>
  </li>
  <li>
    <a href="#"><span data-title="with Link">with Link</span></a>
  </li>
</ul>

<ul class="full height reverse">
  <li>
    <span data-title="no link">no link</span>
  </li>
  <li>
    <a href="#"><span data-title="with Link">with Link</span></a>
  </li>
</ul>



<h2>made with love at <a href="http://www.neatnait.com/">neatnait</a></h2>

NeatNait-css3-3D-transitions-menu.markdown

NeatNait css3 3D transitions menu

A bunch of css3 only 3D transitions made with love at neatnait

A Pen by NeatNait on CodePen.

License.

script.js

body{
  text-align:center;
}

h1{
  text-align:left;
  padding:0 2em;
  color:#f06;
}
h2 a{
  color:#ff0066;
}

a{
  color:white;
  text-decoration:none;
}

ul{
  list-style:none;
  display:inline-block;
}

li{
  font-weight:bold;
  margin:0;
  padding:0;
  float:left;
  padding:0px;
  background:#333;
  color: white;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  perspective: 600px;
  perspective-origin: 50% 50%;
}


/*
  li span variations 
*/
li span{
  display: block;
  position: relative;
  padding:20px;
  transition: all 400ms ease;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
}
.rotate.middle li span, .reverse li span{
  transform-origin: 0% 50%;
}
.rotate.bottom li span{
  transform-origin: 0% 100%;
}



/*
  li:hover span variations 
*/ 
li:hover span, .rotate.middle li:hover span {
  background: #ddd;
  transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.reverse li:hover span {
  transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
}



/*
  li span:after variations 
*/
li span:after {
  content: attr(data-title);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px;
  color: #f06;
  background: #444;
  transform-origin: 50% 0%;
  transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
}
.half.height li span:after {
  padding:5px 20px;
}
.full.height li span:after {
  padding: 20px 20px;
}
.rotate.bottom li span:after {
  transform-origin: 0% 100%;
}
.rotate.bottom.disappear li span:after{
  transform-origin: 0% 0%;
}
.rotate.middle.full.height li span:after{
  transform-origin: 100% 50%;
}
.reverse li span:after {
  transform-origin: 100% 50%;
  transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
}



.no-background li, .no-background a{
  background:none;
  color:#ff0066;
}

style.css

body{
  text-align:center;
  font-family:sans-serif;
}

h1{
  text-align:left;
  padding:0 2em;
  color:#f06;
}
h2 a{
  color:#ff0066;
}

a{
  color:white;
  text-decoration:none;
}

ul{
  list-style:none;
  display:inline-block;
}

li{
  font-weight:bold;
  margin:0;
  padding:0;
  float:left;
  padding:0px;
  background:#333;
  color: white;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  -webkit-perspective: 600px;
     -moz-perspective: 600px;
      -ms-perspective: 600px;
       -o-perspective: 600px;
          perspective: 600px;

  -webkit-perspective-origin: 50% 50%;
     -moz-perspective-origin: 50% 50%;
      -ms-perspective-origin: 50% 50%;
       -o-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;          
}


/*
  li span variations 
*/
li span{
  display: block;
  position: relative;
  padding:20px;
  -webkit-transition: all .4s ease;
     -moz-transition: all .4s ease;
      -ms-transition: all .4s ease;
       -o-transition: all .4s ease;
          transition: all .4s ease;

  -webkit-transform-origin: 50% 0%;
     -moz-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
       -o-transform-origin: 50% 0%;
          transform-origin: 50% 0%;

  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;

}
.rotate.middle li span, .reverse li span{
  -webkit-transform-origin: 0% 50%;
     -moz-transform-origin: 0% 50%;
      -ms-transform-origin: 0% 50%;
       -o-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}
.rotate.bottom li span{
  -webkit-transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
       -o-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}



/*
  li:hover span variations 
*/ 
li:hover span, .rotate.middle li:hover span {
  background: #ddd;
  -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
     -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
      -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
       -o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
          transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.reverse li:hover span {
  -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
     -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
      -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
       -o-transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
          transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
}



/*
  li span:after variations 
*/
li span:after {
  content: attr(data-title);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px;
  color: #f06;
  background: #444;
  -webkit-transform-origin: 50% 0%;
     -moz-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
       -o-transform-origin: 50% 0%;
          transform-origin: 50% 0%;

  -webkit-transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
     -moz-transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
      -ms-transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
       -o-transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
          transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
}
.half.height li span:after {
  padding:5px 20px;
}
.full.height li span:after {
  padding: 20px 20px;
}
.rotate.bottom li span:after {
  -webkit-transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
       -o-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}
.rotate.bottom.disappear li span:after{
  -webkit-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
       -o-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}
.rotate.middle.full.height li span:after{
  -webkit-transform-origin: 100% 50%;
     -moz-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
       -o-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}
.reverse li span:after {
  -webkit-transform-origin: 100% 50%;
     -moz-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
       -o-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
     -moz-transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
      -ms-transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
       -o-transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
          transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
}



.no-background li, .no-background a{
  background:none;
  color:#ff0066;
}