个人中心
gpt4 book ai didi

css - 旋转的 3d 导航栏

转载 作者：技术小花猫 更新时间：2023-10-29 11:10:43 27 4
gpt4 key购买 nike

我正在尝试使用带有转换、转换和透视的纯 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 并向您展示 fiddle ，然后我将编辑更详细的解释，说明其工作原理和原因:

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 中制作一个盒子？”
那么让我们学习如何制作一个盒子。
首先，我们建立一个 box容器。既然是导航框，就叫它 nav-box .我们应用的所有变换(除了着色，我们稍后会讲到)都将在我们的 nav-box 上完成。 .
我们的规则 nav-box将决定它作为一个对象的行为方式。我们特别讨论两个: transform-origin和 transform-style transform-origin默认为 center center，但我想在这里调用它。这基本上是要告诉我们的盒子:嘿，我们需要你围绕你的绝对中心旋转。如果我们将其设置为 transform-origin: center bottom' it would look like the box is spinning around its bottom edge. 中心顶部`，它会围绕其顶部边缘旋转。不过，我认为这不是你想要的。 transform-style需要设置为 preserve-3d .这样做是指示浏览器不要用 transform 来处理元素。在它下面。其他选项包括 flat它告诉浏览器忽略它下面的旋转。我们要设置的原因 preserve-3d在我们的 nav-box这里是为了确保 transforms当我们 transform 时，我们应用到框边被保留。 parent 。整洁的东西，是吧？
建立我们的双方
我们站在我们的一边，就像我们 nav-box 的 child 一样并按照使用 rotateX 的顺序定位它们:
  • 0前部旋转
  • 180deg背面
  • -90deg用于底部
  • 90deg为顶部

    • 我们现在也可以用 .left { transform: rotateY(-90deg); } .right { rotateY(90deg); } 设置左右两边.请注意，我们使用了 Y这两个例子的轴。
    其次，我们设置了一个 translateZ 25px 的值.那么这到底是在做什么呢？它告诉我们的盒子他们需要移动 25px从父项的中心相对于它们各自的旋转。我们为什么选择 25px ?因为它正好是我们每个盒子高度的一半。这意味着它将与任一边缘的侧面很好地齐平。
    然后是有趣的部分:
    我们根据它们的位置和面向屏幕的东西对盒子进行着色。背景颜色与我们使用 show-front 显示的框的哪一侧有关。 , show-back等。底部的一侧变暗，顶部的一侧变亮。我只是喜欢这样 - 完成这项任务完全没有必要，但让它看起来更现实一些。
    希望有帮助!

    IE 更新
    Fiddle Example
    所以，一旦我们为 IE 修复了它，就没有什么好看的了，但它就是这样。全部 preserve-3d正在做的是在我们旋转容器时为您应用变换，而不是将它们展平。如果我们不能使用 preserve-3d ，我们必须根据总旋转量来计算。
    这个解决方案就是这样做的。我不会深入讨论这个问题，而不是强调这需要多少 JavaScript，并强调 .rewind类(class): 
    #nav-box.rewind div {
        backface-visibility: hidden;
    }
    因为我们必须手动倒带这个解决方案，所以我们必须防止在错误的时间应用 z-index 重新排序。那就是 backface-visibility进来。
    Example showing depth in IE
    Another example without the need for the rewind class
    希望解决 浏览器 为你。

    关于css - 旋转的 3d 导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26986830/

    27 4 0
    文章推荐： ios - UITableView -headerViewForSection 返回(空)
    文章推荐： c# - Process.Start() 创建的进程在父应用程序关闭时终止
    文章推荐： ios - 在 iOS 中，如何将 JSON 字符串解析为对象
    文章推荐： linux - Linux 中的网络命名空间是什么？
    技术小花猫
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com