css – 旋转的3d导航栏

CSS 2019-05-06
我正在尝试使用纯CSS创建一个带有变换,过渡和透视的3d导航栏.

这是我的代码：

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

我有前两个面使用3D效果正确旋转,但第三个面看起来不正确.当您从第二个旋转到第三个时,您会注意到顶部不能正确旋转并且看起来很平坦.

任何帮助是极大的赞赏.

解决方法

Fiddle with a flipping box

这与你开始时的情况有很大的不同,但是让我发布我的CSS并向你展示小提琴,然后我将编辑一个更长的解释,说明它的工作方式和原因：

HTML

<section class="container">
    <nav id="nav-Box" class="show-front">
        <div class="front">
            <a href="#">Show Bottom</a>
        </div>
        <div class="bottom">
            <a href="#">Show Back</a></div>
        <div class="back">
            <a href="#">Show Top</a></div>
        <div class="top">
            <a href="#">Show Front</a></div>
    </nav>
</section>

CSS

.container {
  position: relative;
  perspective: 1000px;
  transform: scale(0.95);
}

#nav-Box {
  width: 100%;
  height: 50px;
  position: absolute;
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

#nav-Box div {
  width: 100%;
  height: 50px;
  display: block;
  position: absolute;
  transition: background-color 0.5s;
}

#nav-Box .front  { transform: rotateX(   0deg ) translateZ( 25px ); background-color: #ccc; }
#nav-Box .back   { transform: rotateX( 180deg ) translateZ( 25px ); background-color: #ccc; }
#nav-Box .top    { transform: rotateX(  90deg ) translateZ( 25px ); background-color: #ccc; }
#nav-Box .bottom { transform: rotateX( -90deg ) translateZ( 25px ); background-color: #ccc; }

#nav-Box.show-front  { transform: rotateY(    0deg ); }
#nav-Box.show-front .bottom { background-color: #a0a0a0; }
#nav-Box.show-front .top { background-color: #e0e0e0; }
#nav-Box.show-back   { transform: rotateX( -180deg ); }
#nav-Box.show-back .bottom { background-color: #e0e0e0; }
#nav-Box.show-back .top { background-color: #a0a0a0; }
#nav-Box.show-top    { transform: rotateX(  -90deg ); }
#nav-Box.show-top .front { background-color: #a0a0a0; }
#nav-Box.show-top .back { background-color: #e0e0e0; }
#nav-Box.show-bottom { transform: rotateX(   90deg ); }
#nav-Box.show-bottom .front { background-color: #e0e0e0; }
#nav-Box.show-bottom .back { background-color: #a0a0a0; }

HTML / CSS的说明

设置我们的盒子

你开始以错误的方式思考这个问题,我不想这么说.你接近这个“我怎么能像盒子一样对待这四个方面”,而不是“如何在CSS中制作一个盒子？”

那么让我们学习如何制作一个盒子.

首先,我们建立一个盒子容器.由于这是一个导航框,我们称之为导航框.我们应用的所有变换(除了阴影,我们将在稍后得到)将在我们的导航框中完成.

导航盒上的规则将决定它作为对象的行为方式.让我们特别讨论两个：transform-origin和transform-style

transform-origin默认为center center,但我想在这里调用它.这基本上是告诉我们的方框：嘿,我们需要你围绕你的绝对中心.如果我们把它设置为变换原点：中心底部’看起来就像盒子围绕它的底部边缘旋转.中心顶部`它会围绕它的顶部边缘旋转.不过,我认为这不是你想要的.

transform-style需要设置为preserve-3d.这样做是指示浏览器不要在其下面进行转换的元素大惊小怪.其他选项包括flat,告诉浏览器忽略它下面的旋转.我们想在这里的导航框上设置preserve-3d的原因是为了确保我们在转换父节点时保留应用于框边的变换.干净的东西,对吧？

树立我们的立场

我们将我们的侧面设置为导航盒的子项,并按照他们应该使用rotateX的顺序进行定位：

正面> 0转
>背部180度
> -90deg为底部
> 90deg为顶部

我们现在也可以用.left {transform：rotateY(-90deg);设置左右两侧. } .right {rotateY(90deg); }.请注意,我们将Y轴用于这两个示例.

其次,我们将translateZ值设置为25px.那到底是怎么回事？它告诉我们的盒子他们需要从父母的中心相对于他们各自的旋转移动25px.为什么我们选择25px？因为它正好是我们每个盒子高度的一半.这意味着它可以很好地与两边的边缘齐平.

然后有趣的部分：

我们根据盒子的位置和面向屏幕的方式对盒子进行着色.背景颜色是相对于我们展示的前方,后背等方框的哪一侧.底部的侧面变暗,顶部的侧面变浅.我只是喜欢它 – 完全没有必要完成这项任务,但让它看起来更现实一些.

希望有所帮助！

IE的更新

Fiddle Example

所以,一旦我们为IE修复它,就没有太多相关的了,但现在就是这样.所有preserve-3d正在做的是在我们旋转容器时为你应用变换,而不是展平它们.如果我们不能使用preserve-3d,我们必须根据总旋转量进行计算.

这个解决方案做到了.我不会深入讨论这个问题,而是强调这需要多少JavaScript,并突出显示.rewind类：

#nav-Box.rewind div {
    backface-visibility: hidden;
}

因为我们必须手动回放此解决方案,所以我们必须防止在错误的时间应用z-index重新排序.这就是背面可视性的来源.

Example showing depth in IE

Another example without the need for the rewind class

希望能为您解决IE问题.

相关文章

Css3如何实现鼠标移上变长特效？
Css3如何实现鼠标移上变长特效？（图文+视频）
css3怎么实现鼠标悬停图片时缓慢变大效果?
css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）
jquery如何实现点击网页回到顶部效果？
jquery如何实现点击网页回到顶部效果？（图文+视频）
css3边框阴影效果怎么做？
css3边框阴影效果怎么做？（图文+视频）
css怎么实现圆角边框和圆形效果？（图文+视频教程）
css怎么实现圆角边框和圆形效果？（图文+视频教程）
Css3如何实现旋转移动动画特效
Css3如何实现旋转移动动画特效