Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header class="cd-header">
		<a href="#0" class="cd-logo"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="124px" height="23px" viewBox="-337 289 124 23" enable-background="new -337 289 124 23" xml:space="preserve">
<rect x="-337" y="289" fill="#C96AA4" width="70" height="23"/>
<rect x="-267" y="289" fill="#9A57BD" width="27" height="23"/>
<rect x="-240" y="289" fill="#FFFFFF" width="27" height="23"/>
</svg></a>
		<a href="#0" class="cd-3d-nav-trigger">
			Menu
			<span></span>
		</a>
	</header> <!-- .cd-header -->
	
	<main>
		<h1>3D Rotating Navigation</h1>
		<!-- all your content here -->
	</main>
	
	<nav class="cd-3d-nav-container">
		<ul class="cd-3d-nav">
			<li class="cd-selected">
				<a href="#">Dashboard</a>
			</li>

			<li>
				<a href="#0">Projects</a>
			</li>

			<li>
				<a href="#0">Images</a>
			</li>

			<li>
				<a href="#">Settings</a>
			</li>

			<li>
				<a href="#">New</a>
			</li>
		</ul> <!-- .cd-3d-nav -->

		<span class="cd-marker color-1"></span>	
	</nav> <!-- .cd-3d-nav-container -->
              
            
!

CSS

              
                /* ---Primary style--- */
*, *::after, *::before {
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  background-color: #485274; }

a {
  text-decoration: none; }

/* ---Main Components ---- */
.cd-header {
  height: 80px;
  width: 90%;
  margin: 0 auto;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  .cd-header:after {
    content: "";
    display: table;
    clear: both; }
  .cd-header.nav-is-visible {
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
    transform: translateY(80px); }
  @media only screen and (min-width: 768px) {
    .cd-header.nav-is-visible {
      -webkit-transform: translateY(170px);
      -moz-transform: translateY(170px);
      -ms-transform: translateY(170px);
      -o-transform: translateY(170px);
      transform: translateY(170px); } }

.cd-logo {
  float: left;
  margin-top: 28px; }

.cd-3d-nav-trigger {
  position: relative;
  float: right;
  height: 45px;
  width: 45px;
  margin-top: 18px;
  /* replace text with background image */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent; }
  .cd-3d-nav-trigger span,
  .cd-3d-nav-trigger span::before,
  .cd-3d-nav-trigger span::after {
    /* hamburger icon in CSS */
    position: absolute;
    width: 28px;
    height: 3px;
    background-color: #FFF;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  .cd-3d-nav-trigger span {
    /* this is the central line */
    top: 21px;
    left: 8px;
    -webkit-transition: background 0.2s 0.5s;
    -moz-transition: background 0.2s 0.5s;
    transition: background 0.2s 0.5s; }
    .cd-3d-nav-trigger span::before, .cd-3d-nav-trigger span:after {
      /* these are the upper and lower lines */
      content: '';
      left: 0;
      -webkit-transition: -webkit-transform 0.2s 0.5s;
      -moz-transition: -moz-transform 0.2s 0.5s;
      transition: transform 0.2s 0.5s; }
    .cd-3d-nav-trigger span::before {
      bottom: 8px; }
    .cd-3d-nav-trigger span::after {
      top: 8px; }
  .nav-is-visible .cd-3d-nav-trigger span {
    /* hide line in the center */
    background-color: rgba(255, 255, 255, 0); }
    .nav-is-visible .cd-3d-nav-trigger span::before, .nav-is-visible .cd-3d-nav-trigger span::after {
      /* keep visible other 2 lines */
      background-color: white; }
    .nav-is-visible .cd-3d-nav-trigger span::before {
      -webkit-transform: translateY(8px) rotate(-45deg);
      -moz-transform: translateY(8px) rotate(-45deg);
      -ms-transform: translateY(8px) rotate(-45deg);
      -o-transform: translateY(8px) rotate(-45deg);
      transform: translateY(8px) rotate(-45deg); }
    .nav-is-visible .cd-3d-nav-trigger span::after {
      -webkit-transform: translateY(-8px) rotate(45deg);
      -moz-transform: translateY(-8px) rotate(45deg);
      -ms-transform: translateY(-8px) rotate(45deg);
      -o-transform: translateY(-8px) rotate(45deg);
      transform: translateY(-8px) rotate(45deg); }

.cd-3d-nav-container {
  /* this is the 3D navigation container */
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background-color: #000000;
  visibility: hidden;
  /* enable a 3D-space for children elements */
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
  -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
  transition: transform 0.5s 0s, visibility 0s 0.5s; }
  .cd-3d-nav-container.nav-is-visible {
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.5s 0s, visibility 0.5s 0s;
    -moz-transition: -moz-transform 0.5s 0s, visibility 0.5s 0s;
    transition: transform 0.5s 0s, visibility 0.5s 0s; }
  @media only screen and (min-width: 768px) {
    .cd-3d-nav-container {
      height: 170px; } }

.cd-3d-nav {
  /* this is the 3D rotating navigation */
  position: relative;
  height: 100%;
  background-color: #343c55;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s; }
  .cd-3d-nav::after {
    /* menu dark cover layer - to enhance perspective effect */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s 0s, visibility 0.5s 0s;
    -moz-transition: opacity 0.5s 0s, visibility 0.5s 0s;
    transition: opacity 0.5s 0s, visibility 0.5s 0s; }
  .cd-3d-nav li {
    height: 100%;
    width: 20%;
    float: left; }
    .cd-3d-nav li:first-of-type a::before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='64'%3E%3Cpath fill='%23505977' d='M16 32C7.2 32 0 24.8 0 16S7.2 0 16 0s16 7.2 16 16-7.2 16-16 16zm0-30C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm11 15c-.6 0-1-.4-1-1 0-5.5-4.5-10-10-10S6 10.5 6 16c0 .6-.4 1-1 1s-1-.4-1-1C4 9.4 9.4 4 16 4s12 5.4 12 12c0 .6-.4 1-1 1zm-11.3 5l2.7-12c.1-.5.7-.9 1.2-.7.5.1.9.7.8 1.2l-2.8 12.1c.8.4 1.4 1.3 1.4 2.4 0 1.7-1.3 3-3 3s-3-1.3-3-3c0-1.5 1.2-2.8 2.7-3zm.3 4c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z'/%3E%3Cpath fill='%23FFF' d='M16 64C7.2 64 0 56.8 0 48s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zm0-30C8.3 34 2 40.3 2 48s6.3 14 14 14 14-6.3 14-14-6.3-14-14-14zm11 15c-.6 0-1-.4-1-1 0-5.5-4.5-10-10-10S6 42.5 6 48c0 .6-.4 1-1 1s-1-.4-1-1c0-6.6 5.4-12 12-12s12 5.4 12 12c0 .6-.4 1-1 1zm-11.3 5l2.7-12c.1-.5.7-.9 1.2-.7.5.1.9.7.8 1.2l-2.8 12.1c.8.4 1.4 1.3 1.4 2.4 0 1.7-1.3 3-3 3s-3-1.3-3-3c0-1.5 1.2-2.8 2.7-3zm.3 4c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z'/%3E%3C/svg%3E"); }
    .cd-3d-nav li:nth-of-type(2) a::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='62'%3E%3Cpath fill='%23505977' d='M31 30H1c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1h9.1c.5-2.8 2.9-5 5.9-5s5.4 2.2 5.9 5H31c.6 0 1 .4 1 1v23c0 .6-.4 1-1 1zM16 2c-1.9 0-3.4 1.3-3.9 3h7.7c-.4-1.7-1.9-3-3.8-3zm14 5H2v6h28V7zm-15.7 8c.3.6 1 1 1.7 1s1.4-.4 1.7-1h-3.4zM30 15H19.9c-.4 1.7-2 3-3.9 3s-3.4-1.3-3.9-3H2v13h28V15z'/%3E%3Cpath fill='%23FFF' d='M31 62H1c-.6 0-1-.4-1-1V38c0-.6.4-1 1-1h9.1c.5-2.8 2.9-5 5.9-5s5.4 2.2 5.9 5H31c.6 0 1 .4 1 1v23c0 .6-.4 1-1 1zM16 34c-1.9 0-3.4 1.3-3.9 3h7.7c-.4-1.7-1.9-3-3.8-3zm14 5H2v6h28v-6zm-15.7 8c.3.6 1 1 1.7 1s1.4-.4 1.7-1h-3.4zM30 47H19.9c-.4 1.7-2 3-3.9 3s-3.4-1.3-3.9-3H2v13h28V47z'/%3E%3C/svg%3E");}
    .cd-3d-nav li:nth-of-type(3) a::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='60'%3E%3Cpath fill='%23505977' d='M27 28H5c-2.8 0-5-2.2-5-5V5c0-2.8 2.2-5 5-5h22c2.8 0 5 2.2 5 5v18c0 2.8-2.2 5-5 5zM5 26h13.8l-9.3-7.7-6.9 6.4s-.1 0-.1.1C3.1 25.5 4 26 5 26zM30 5c0-1.7-1.3-3-3-3H5C3.3 2 2 3.3 2 5v17.6l6.8-6.4c.4-.3.9-.4 1.3 0l2.3 1.9 8-7.9c.4-.4 1-.4 1.4 0L30 18V5zm0 15.7l-8.8-8.4-7.2 7.1 7.9 6.6H27c1.7 0 3-1.3 3-3v-2.3zM11 14c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5zm0-8C9.3 6 8 7.3 8 9s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z'/%3E%3Cpath fill='%23FFF' d='M27 60H5c-2.8 0-5-2.2-5-5V37c0-2.8 2.2-5 5-5h22c2.8 0 5 2.2 5 5v18c0 2.8-2.2 5-5 5zM5 58h13.8l-9.3-7.7-6.9 6.4s-.1 0-.1.1C3.1 57.5 4 58 5 58zm25-21c0-1.7-1.3-3-3-3H5c-1.7 0-3 1.3-3 3v17.6l6.8-6.4c.4-.3.9-.4 1.3 0l2.3 1.9 8-7.9c.4-.4 1-.4 1.4 0L30 50V37zm0 15.7l-8.8-8.4-7.2 7.1 7.9 6.6H27c1.7 0 3-1.3 3-3v-2.3zM11 46c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5zm0-8c-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z'/%3E%3C/svg%3E");}
    .cd-3d-nav li:nth-of-type(4) a::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='62'%3E%3Cpath fill='%23505977' d='M27 30H5c-2.8 0-5-2.2-5-5V5c0-2.8 2.2-5 5-5h22c2.8 0 5 2.2 5 5v20c0 2.8-2.2 5-5 5zm3-25c0-1.7-1.3-3-3-3H5C3.3 2 2 3.3 2 5v20c0 1.7 1.3 3 3 3h22c1.7 0 3-1.3 3-3V5zm-5 11h-1v7c0 .6-.4 1-1 1s-1-.4-1-1v-7h-1c-.6 0-1-.4-1-1s.4-1 1-1h1V7c0-.6.4-1 1-1s1 .4 1 1v7h1c.6 0 1 .4 1 1s-.4 1-1 1zm-7-4h-1v11c0 .6-.4 1-1 1s-1-.4-1-1V12h-1c-.6 0-1-.4-1-1s.4-1 1-1h1V7c0-.6.4-1 1-1s1 .4 1 1v3h1c.6 0 1 .4 1 1s-.4 1-1 1zm-7 7h-1v4c0 .6-.4 1-1 1s-1-.4-1-1v-4H7c-.6 0-1-.4-1-1s.4-1 1-1h1V7c0-.6.4-1 1-1s1 .4 1 1v10h1c.6 0 1 .4 1 1s-.4 1-1 1z'/%3E%3Cpath fill='%23FFF' d='M27 62H5c-2.8 0-5-2.2-5-5V37c0-2.8 2.2-5 5-5h22c2.8 0 5 2.2 5 5v20c0 2.8-2.2 5-5 5zm3-25c0-1.7-1.3-3-3-3H5c-1.7 0-3 1.3-3 3v20c0 1.7 1.3 3 3 3h22c1.7 0 3-1.3 3-3V37zm-5 11h-1v7c0 .6-.4 1-1 1s-1-.4-1-1v-7h-1c-.6 0-1-.4-1-1s.4-1 1-1h1v-7c0-.6.4-1 1-1s1 .4 1 1v7h1c.6 0 1 .4 1 1s-.4 1-1 1zm-7-4h-1v11c0 .6-.4 1-1 1s-1-.4-1-1V44h-1c-.6 0-1-.4-1-1s.4-1 1-1h1v-3c0-.6.4-1 1-1s1 .4 1 1v3h1c.6 0 1 .4 1 1s-.4 1-1 1zm-7 7h-1v4c0 .6-.4 1-1 1s-1-.4-1-1v-4H7c-.6 0-1-.4-1-1s.4-1 1-1h1V39c0-.6.4-1 1-1s1 .4 1 1v10h1c.6 0 1 .4 1 1s-.4 1-1 1z'/%3E%3C/svg%3E");}
    .cd-3d-nav li:nth-of-type(5) a::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='64'%3E%3Cpath fill='%23505977' d='M31.7 4.8L19.4 17c-.6.6-1.4 1-2.2 1-.5 0-1-.1-1.4-.3l-1 1c-.2.2-.5.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1-1c-.2-.4-.3-.9-.3-1.4 0-.8.3-1.6.9-2.2L27.3.3c.4-.4 1-.4 1.4 0l3 3c.2.2.3.5.3.8 0 .2-.1.5-.3.7zM28 2.5L16.4 14c-.2.2-.3.5-.3.8s.1.6.3.8c.4.4 1.2.4 1.6 0L29.6 4.1 28 2.5zM18.1 4H5C3.4 4 2 5.4 2 7v19.9C2 28.6 3.4 30 5 30h20c1.7 0 3-1.4 3-3.1V13.8c0-.6.5-1 1-1 .6 0 1 .4 1 1V27c0 2.8-2.3 5-5 5H5c-2.8 0-5-2.2-5-5V7c0-2.8 2.3-5 5-5h13.1c.6 0 1 .4 1 1s-.4 1-1 1z'/%3E%3Cpath fill='%23FFF' d='M31.7 36.8L19.4 49c-.6.6-1.4 1-2.2 1-.5 0-1-.1-1.4-.3l-1 1c-.2.2-.5.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1-1c-.2-.4-.3-.9-.3-1.4 0-.8.3-1.6.9-2.2l12.3-12.4c.4-.4 1-.4 1.4 0l3 3c.2.2.3.5.3.8 0 .2-.1.5-.3.7zM28 34.5L16.4 46c-.2.2-.3.5-.3.8s.1.6.3.8c.4.4 1.2.4 1.6 0l11.6-11.5-1.6-1.6zM18.1 36H5c-1.6 0-3 1.4-3 3v19.9C2 60.6 3.4 62 5 62h20c1.7 0 3-1.4 3-3.1V45.8c0-.6.5-1 1-1 .6 0 1 .4 1 1V59c0 2.8-2.3 5-5 5H5c-2.8 0-5-2.2-5-5V39c0-2.8 2.3-5 5-5h13.1c.6 0 1 .4 1 1s-.4 1-1 1z'/%3E%3C/svg%3E");}
  .cd-3d-nav a {
    position: relative;
    display: block;
    height: 100%;
    color: transparent;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    transition: background-color 0.2s; }
    .cd-3d-nav a::before {
      /* navigation icons */
      content: '';
      height: 32px;
      width: 32px;
      position: absolute;
      left: 50%;
      top: 50%;
      bottom: auto;
      right: auto;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background-size: 32px 64px;
      background-repeat: no-repeat;
      background-position: 0 0; }
    .no-touch .cd-3d-nav a:hover {
      background-color: #2b3145; }
  .cd-3d-nav .cd-selected a {
    background-color: #212635; }
    .no-touch .cd-3d-nav .cd-selected a:hover {
      background-color: #212635; }
    .cd-3d-nav .cd-selected a::before {
      background-position: 0 -32px; }
  .nav-is-visible .cd-3d-nav {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); }
    .nav-is-visible .cd-3d-nav::after {
      /* menu cover layer - hide it when navigation is visible */
      opacity: 0;
      visibility: hidden;
      -webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s;
      -moz-transition: opacity 0.5s 0s, visibility 0s 0.5s;
      transition: opacity 0.5s 0s, visibility 0s 0.5s; }
  @media only screen and (min-width: 768px) {
    .cd-3d-nav a {
      padding: 7.6em 1em 0;
      color: #ffffff;
      font-size: 1.3rem;
      font-weight: 600;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      /* truncate text with ellipsis if too long */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .cd-3d-nav a::before {
        top: 4.4em;
        left: 50%;
        right: auto;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); } }

.cd-marker {
  /* line at the bottom of nav selected item */
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 20%;
  background-color: currentColor;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: translateZ(0) rotateX(90deg);
  -moz-transform: translateZ(0) rotateX(90deg);
  -ms-transform: translateZ(0) rotateX(90deg);
  -o-transform: translateZ(0) rotateX(90deg);
  transform: translateZ(0) rotateX(90deg);
  -webkit-transition: -webkit-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
  -moz-transition: -moz-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
  transition: transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; }
  .cd-marker::before {
    /* triangle at the bottom of nav selected item */
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 0;
    width: 0;
    border: 10px solid transparent;
    border-bottom-color: inherit; }
  .nav-is-visible .cd-marker {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); }

/* these are the colors of the markers - line + arrow */
.color-1 {
  color: #9a57bd; }

.color-2 {
  color: #c96aa4; }

.color-3 {
  color: #d6915e; }

.color-4 {
  color: #5397c7; }

.color-5 {
  color: #77cd91; }

main {
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  main h1 {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 300;
    color: #ffffff;
    margin: 2em auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  main.nav-is-visible {
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
    transform: translateY(80px); }
  @media only screen and (min-width: 768px) {
    main.nav-is-visible {
      -webkit-transform: translateY(170px);
      -moz-transform: translateY(170px);
      -ms-transform: translateY(170px);
      -o-transform: translateY(170px);
      transform: translateY(170px); }
    main h1 {
      font-size: 3.6rem;
      margin: 4em auto; } }

              
            
!

JS

              
                jQuery(document).ready(function($){
	//toggle 3d navigation
	$('.cd-3d-nav-trigger').on('click', function(){
		toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
	});

	//select a new item from the 3d navigation
	$('.cd-3d-nav a').on('click', function(){
		var selected = $(this);
		selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
		updateSelectedNav('close');
	});

	$(window).on('resize', function(){
		window.requestAnimationFrame(updateSelectedNav);
	});

	function toggle3dBlock(addOrRemove) {
		if(typeof(addOrRemove)==='undefined') addOrRemove = true;	
		$('.cd-header').toggleClass('nav-is-visible', addOrRemove);
		$('main').toggleClass('nav-is-visible', addOrRemove);
		$('.cd-3d-nav-container').toggleClass('nav-is-visible', addOrRemove);
	}

	//this function update the .cd-marker position
	function updateSelectedNav(type) {
		var selectedItem = $('.cd-selected'),
			selectedItemPosition = selectedItem.index() + 1, 
			leftPosition = selectedItem.offset().left,
			backgroundColor = selectedItem.data('color');

		$('.cd-marker').removeClassPrefix('color').addClass('color-'+ selectedItemPosition).css({
			'left': leftPosition,
		});
		if( type == 'close') {
			$('.cd-marker').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
				toggle3dBlock(false);
			});
		}
	}

	$.fn.removeClassPrefix = function(prefix) {
	    this.each(function(i, el) {
	        var classes = el.className.split(" ").filter(function(c) {
	            return c.lastIndexOf(prefix, 0) !== 0;
	        });
	        el.className = $.trim(classes.join(" "));
	    });
	    return this;
	};
});
              
            
!
999px

Console