Barra de navegação 3D que gira

Question

Nov 18, 2014, 05:52 AM

Barra de navegação 3D que gira

Estou tentando criar uma barra de navegação 3D usando CSS puro com transformações, transições e perspectiva.

Aqui está o meu código:

.navbar-fixed-bottom {
	  background: transparent;
	}
	
	.navbar-perspective {
	  width: 100%;
	  height: 100%;
	  position: relative;
	  -webkit-perspective: 1100px;
	  -moz-perspective: 1100px;
	  perspective: 1100px;
	  -webkit-perspective-origin: 50% 0;
	  -moz-perspective-origin: 50% 0;
	  perspective-origin: 50% 0;
	}
	
	.navbar-perspective > div {
	  margin: 0 auto;
	  position: relative;
	  text-align: justify;
	  -webkit-backface-visibility: hidden;
	  -moz-backface-visibility: hidden;
	  backface-visibility: hidden;
	  -webkit-transition: all 0.5s;
	  -moz-transition: all 0.5s;
	  transition: all 0.5s;
	  height: 50px;
	  font-size:20px;
	}
	
	.navbar-primary {
	  background-color: #cccccc;
	  z-index: 2;
	  -webkit-transform-origin: 0% 100%;
	  -moz-transform-origin: 0% 100%;
	  transform-origin: 0% 100%;
	}
	
	.navbar .navbar-secondary,
	.navbar .navbar-tertiary {
	  background-color: #bfbfbf;
	  width: 100%;
	  -webkit-transform-origin: 0% 0%;
	  -moz-transform-origin: 0% 0%;
	  transform-origin: 0% 0%;
	  z-index: 1;
	  -webkit-transform: rotateX(-90deg);
	  -moz-transform: rotateX(-90deg);
	  transform: rotateX(-90deg);
	  -webkit-transition: top 0.5s;
	  -moz-transition: top 0.5s;
	  transition: top 0.5s;
	  position: absolute;
	  top: 0;
	}
	
	.navbar .navbar-tertiary {
	  background-color: #b3b3b3;
	}
	
	.navbar-rotate-primary {
	  height: 50px;
	}
	
	.navbar-rotate-primary .navbar-primary {
	  -webkit-transform: translateY(0%) rotateX(0deg);
	  -moz-transform: translateY(0%) rotateX(0deg);
	  transform: translateY(0%) rotateX(0deg);
	}
	
	.navbar-rotate-primary .navbar-secondary,
	.navbar-rotate-primary .navbar-tertiary {
	  top: 100%;
	  -webkit-transition: -webkit-transform 0.5s;
	  -moz-transition: -moz-transform 0.5s;
	  transition: transform 0.5s;
	  -webkit-transform: rotateX(-90deg);
	  -moz-transform: rotateX(-90deg);
	  transform: rotateX(-90deg);
	}
	
	.navbar-rotate-secondary,
	.navbar-rotate-tertiary {
	  height: 50px;
	}
	
	.navbar-rotate-secondary .navbar-primary,
	.navbar-rotate-tertiary .navbar-primary {
	  -webkit-transform: translateY(-100%) rotateX(90deg);
	  -moz-transform: translateY(-100%) rotateX(90deg);
	  transform: translateY(-100%) rotateX(90deg);
	}
	
	.navbar-rotate-secondary .navbar-secondary,
	.navbar-rotate-tertiary .navbar-secondary {
	  top: 100%;
	  -webkit-transition: -webkit-transform 0.5s;
	  -moz-transition: -moz-transform 0.5s;
	  transition: transform 0.5s;
	  -webkit-transform: rotateX(0deg) translateY(-100%);
	  -moz-transform: rotateX(0deg) translateY(-100%);
	  transform: rotateX(0deg) translateY(-100%);
	}
	
	.navbar-rotate-secondary-fallback .navbar-primary,
	.navbar-rotate-tertiary-fallback .navbar-primary {
	  display: none;
	}
	
	.navbar-rotate-tertiary .navbar-secondary {
	  -webkit-transform: translateY(-100%) rotateX(90deg);
	  -moz-transform: translateY(-100%) rotateX(90deg);
	  transform: translateY(-100%) rotateX(90deg);
	}
	
	.navbar-rotate-tertiary .navbar-tertiary {
	  top: 100%;
	  -webkit-transition: -webkit-transform 0.5s;
	  -moz-transition: -moz-transform 0.5s;
	  transition: transform 0.5s;
	  -webkit-transform: rotateX(0deg) translateY(-100%);
	  -moz-transform: rotateX(0deg) translateY(-100%);
	  transform: rotateX(0deg) translateY(-100%);
	}

<html>

<head>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>

	<nav id="navigation-bottom" class="navbar navbar-fixed-bottom">
		<div class="navbar-perspective">
			<div class="navbar-primary">
				<a href="javascript:void(0);" onclick="$('#navigation-bottom').attr('class','navbar navbar-fixed-bottom navbar-rotate-secondary')">Rotate To Face 2</a>
			</div>
			<div class="navbar-secondary">
				<a href="javascript:void(0);" onclick="$('#navigation-bottom').attr('class','navbar navbar-fixed-bottom navbar-rotate-tertiary')">Rotate To Face 3</a>
			</div>
			<div class="navbar-tertiary">
				<a href="javascript:void(0);" onclick="$('#navigation-bottom').attr('class','navbar navbar-fixed-bottom navbar-rotate-primary')">Rotate Back To Face 1</a>
			</div>
		</div>
	</nav>

</body>

</html>

Eu tenho as duas primeiras faces para girar corretamente usando um efeito 3D, mas a terceira face não parece certa. Você notará, ao girar do segundo para o terceiro, que a parte superior não gira corretamente e parece plana.

Qualquer ajuda é muito apreciada.