unity3d画布切换

Large sites shown in small viewports increasingly use an “off-canvas” UI model, which site navigation is hidden, and only revealed when the user calls for it.

在小视口中显示的大型站点越来越多地使用“非画布” UI模型，该模型隐藏了站点导航 ，并且仅在用户要求时才显示。

The site that you’re reading now uses a variation of the technique that might be called “under-canvas”: if the browser window is narrow enough, the site navigation is hidden beneath the site content, and revealed by sliding the content to one side.

您正在阅读的网站现在使用一种可能称为“画布底”的技术变体：如果浏览器窗口足够狭窄，则网站导航将隐藏在网站内容下方 ，并通过将内容滑动到一个位置来显示侧。

Either model works well in responsive design, but it’s also possible to have site navigation folded within the page, rather than above or below the main canvas area.

两种模型都可以在响应式设计中很好地工作，但是也可以在页面内而不是在主画布区域上方或下方折叠站点导航。

To make this happen, I have used three separate markup sections: one containing the top-level navigation, a hidden section containing expanded site navigation, and the main content, all wrapped inside a container element. In markup, it would look like this:

为了实现这一点，我使用了三个单独的标记部分：一个包含顶层导航，一个隐藏部分包含扩展的站点导航，以及主要内容，所有内容都包装在一个容器元素中。 在标记中，它看起来像这样：

<div id="foldout"><div id="base-navigation" class="ss-icon"><a href="#">rows</a><a href="#">heart</a><a href="#">star</a><a href="#">grid</a><a href="#">help</a></div><div id="hidden-navigation"><a href="#">HTML</a><a href="#">CSS</a><a href="#">PHP</a><a href="#">MySQL</a></div><div id="foldout-text-content"><img src="himalayas.jpg" alt><h1>Hwæt!</h1><p>We gardena - in geardagum, þeodcyninga…</div>
</div>

I’m using the semantic ligature font SS Standard to create the navigation icons.

我正在使用语义连字字体 SS标准来创建导航图标。

We’ll use CSS to give each section the appearance of a fold. Seen in perspective, the “closed” state of the sections would look like this:

我们将使用CSS为每个部分赋予折叠外观。 从透视图看，各节的“关闭”状态如下所示：

When open, it looks like this:

打开后，它看起来像这样：

Perhaps a little oddly, I’ll use display: table-cell to place the sections side-by-side. It turns out that you can use CSS 3D on HTML tables, which gives rise to many possibilities for roll-out or roll-up table data. Using traditional floats, positioning or flexbox are also possibilities.

也许有些奇怪，我将使用display: table-cell来将各节并排放置。 事实证明，可以在HTML表格上使用CSS 3D ，这为展开或汇总表格数据提供了许多可能性。 也可以使用传统的浮子， 定位或柔箱 。

#foldout {perspective: 1200px;
}
#base-navigation,#hidden-navigation,#foldout-text-content {display: table-cell;vertical-align: top;transition: 1s transform, box-shadow ease; }
#base-navigation,#foldout-text-content {background: hsla(43, 100%, 95%, 1);}

The containing element has perspective applied. Each section has the same properties and values applied (sans vendor prefixes to save space).

包含元素已应用透视图 。 每个部分均具有相同的属性和值(不使用供应商前缀以节省空间)。

I won’t focus on the CSS for the site navigation on the left side, since that is not the focus of this article; instead, I’ll proceed to the styles for the section that is folded back:

我不会在左侧进行站点导航CSS，因为这不是本文的重点。 相反，我将继续进行折回部分的样式：

#hidden-navigation {width: 180px;transform-origin: 0 0 0;transform: rotateY(-75deg);
}
#hidden-navigation a {line-height: 2;color: #222;border-bottom: 1px solid #000;padding-left: .5rem;
}
#hidden-navigation a:hover {background: #222;color: hsla(43, 100%, 98%, 1);
}
#hidden-navigation a:last-child {border-bottom: none;
}

The hidden section is “hinged” from its left-hand side by changing the transform-origin of the element.

通过更改元素的transform-origin ，隐藏部分从左侧“铰接”。

#foldout-text-content {width: 80%;transform: translateX(-85px) translateZ(125px); box-shadow: -8px 0 12px rgba(0,0,0,0.1);
}

The main content area is moved closer to the screen and to the left to meet the edge of the folded navigation. I used translate rather than rotate as the latter will rotate the entire section of content, distorting it.

主要内容区域移至靠近屏幕的位置，并向左移，以适应折叠式导航的边缘。 我使用translate而不是rotate因为后者将旋转内容的整个部分，从而扭曲它。

Before wiring in the JavaScript to engage the motion, I thought it would be easier to create it using hover states first. Both the fold and the main content area will move: the former rotating and changing color very slightly to give the impression that it catches more light, while the former translates across, its shadow disappearing for the same reason.

在连接JavaScript进行动作之前，我认为先使用悬停状态创建动作会更容易。 折叠区域和主要内容区域都将移动：前者会非常轻微地旋转和改变颜色，从而给人留下更多的光线，而前者平移时，其阴影消失的原因相同。

#foldout:hover #foldout-text-content {transform: translateX(-3px) translateZ(15px);box-shadow: 0 0 0 rgba(0,0,0,0.1);
}
#foldout:hover #hidden-navigation {transform: rotateY(-10deg);background: hsla(43, 100%, 98%, 1);
}

The solution also nicely responsive, as you’ll see by resizing the browser when the menu is in its open state: I’ve also added some CSS to devolve the UI as the viewport narrows further.

该解决方案的响应也很好，正如您将在菜单处于打开状态时调整浏览器大小所看到的那样：随着视口范围进一步缩小，我还添加了一些CSS来使UI旋转。

JavaScript连线 (Wiring In The JavaScript)

Making actions happen “on click” is notoriously difficult in CSS. While pure CSS techniques utilizing :target, :focus and :checked states exist, it’s usually easier to turn to JavaScript.

在CSS中，使操作“单击”发生非常困难。 虽然存在利用:target ， :focus和:checked状态的纯CSS技术，但通常更容易转向JavaScript 。

The solution is surprisingly easy: rather than  activating the transition on hover, we’ll do so by changing the class on the container element:

该解决方案非常简单：与通过悬停激活过渡相比，我们将通过更改容器元素上的类来实现：

#foldout.open-sesame #foldout-text-content {transform: translateX(-3px) translateZ(15px);box-shadow: 0 0 0 rgba(0,0,0,0.1);
}
#foldout.open-sesame #hidden-navigation {transform: rotateY(-10deg);background: hsla(43, 100%, 98%, 1);
}

Then add and remove this class with a little JavaScript:

然后使用一些JavaScript添加和删除此类：

var foldouttrigger = document.querySelector("#base-navigation a:first-child");
var foldout = document.getElementById("foldout");
foldouttrigger.addEventListener("click", function() {foldout.classList.toggle("open-sesame");
})

That’s it: the in-fold navigation is complete.

就是这样：内置导航已完成。

缺点 (Downsides)

Hardware and software are the two significant limiting factors of this approach. While well-supported in all other browsers, Microsoft only began to support 3D transform standards in IE 10; the fact that the entire main content area is held and transformed in 3D could prove taxing for lower-end devices, especially if there was a great deal of content.

硬件和软件是此方法的两个重要限制因素。 尽管在所有其他浏览器中都得到了很好的支持，但是Microsoft才开始在IE 10中支持3D转换标准。 整个主要内容区域都以3D形式保存和转换的事实可能会证明对低端设备造成了负担，尤其是在存在大量内容的情况下。

翻译自: https://thenewcode.com/704/In-Canvas-3D-Fold-Navigation

unity3d画布切换