转动的3d Navbar [英] 3d Navbar That Rotates

问题描述

这是我的代码：

  .navbar-fixed-bottom {background：transparent; } .navbar-透明{width：100％;高度：100％;位置：相对; -webkit-perspective：1100px; -moz-perspective：1100px;透视：1100px; -webkit-perspective-origin：50％0; -moz-perspective-origin：50％0;透视原点：50％0; } .navbar-perspective> div {margin：0 auto;位置：相对; 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-转化起点：0％100％;转化起点：0％100％; } .navbar .navbar-secondary，.navbar .navbar-tertiary {background-color：#bfbfbf; width：100％; -webkit-transform-origin：0％0％; -moz转化起点：0％0％;转换原点：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-bottomclass =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'）>旋转到面3< / a& < / div> < div class =navbar-tertiary> < a href =javascript：void（0）; onclick =$（'＃navigation-bottom'）。attr（'class'，'navbar navbar-fixed-bottom navbar-rotate-primary'）>旋转回面1< / a& < / div> < / div> < / nav>< / body>< / html>  

我有使用3d效果正确旋转的前两个面，但第三个面貌看起来不正确。你会注意到，当你从第二到第三旋转，顶部不能正确旋转，看起来平坦。

任何帮助是非常感激。

解决方案

首先，感谢所有评论并回答这个问题，尤其是Josh！

Josh，你的例子完美适用于支持preserve-3d的浏览器。您发布的没有preserve-3d的更新在IE上显示为平面，所以它仍然不完美的所有浏览器。

经过三天的头痛，我意识到了这个问题。没有正确设置边的原点。

一旦我将原点更新为：

  transform-origin：25px 25px -25px; 
  

一旦这是正确的，你真正需要做的是更新对象的旋转。

这是一个3D导航栏的旋转和解决方案，旋转并适用于所有浏览器，包括IE10 + 。

http://jsfiddle.net/tx0emcxe/

I'm trying to create a 3d navbar using pure CSS with transforms, transitions and perspective.

Here is my code:

.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>

I've got the first two faces to rotate properly using a 3d effect, but the third face does not look right. You will notice as you rotate from second to third that the top does not rotate correctly and looks flat.

Any help is greatly appreciated.

解决方案

First of all, thank you to all that commented and answered to this question, especially Josh!

Josh, your example works perfectly for browsers that support preserve-3d. The update you posted without preserve-3d appears flat on IE so it was still not perfected for all browsers.

After three days of headaches, I realized the problem. The origin of the sides was not being set correctly. The sides need to rotate around a point that is half way in on the Z axis.

Once I've updated the origin to :

transform-origin: 25px 25px -25px;

Once this was correct, all you really need to do is update the rotation of the object. No need to use any transformation of the X,Y,Z coordinates.

Here's the fiddle and the solution for a 3D Navigation bar that rotates and works for all browsers including IE10+.

http://jsfiddle.net/tx0emcxe/

这篇关于转动的3d Navbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！