css 3d_CSS 3D技巧与窍门

css 3d

After correctly setting perspective there are a few more factors to consider before starting creative work in CSS 3D. Paradoxically, appreciation of the 3D portion of the CSS Transforms spec can also enhance the performance of 2D transitions and animations, as you’ll see in the next article. First, some under-appreciated aspects of CSS 3D:

正确设置perspective后，在CSS 3D中开始创意工作之前，还需要考虑其他一些因素。 矛盾的是，欣赏CSS Transforms规范的3D部分还可以增强2D过渡和动画的性能，正如您将在下一篇文章中看到的那样。 首先，CSS 3D的一些未被重视的方面：

CSS 3D具有自然响应能力 (CSS 3D is Naturally Responsive)

A surprising aspect of 3D transforms is that they naturally respond to changes in the size of the viewport. Take the simple example of a div containing an image:

3D变换的一个令人惊讶的方面是，它们自然响应视口大小的变化。 以包含图像的div的简单示例为例：

<div class="3d-container">
	<img src="shanghai.jpg" alt="Photograph of Shanghai at night">
</div>

Let’s give the <div> a reasonable perspective value, and rotate the image around Y by 33 degrees. (I’ve dropped vendor prefixes in the CSS declarations for the sake of clarity):

让我们给<div>一个合理的perspective值，然后将图像绕Y旋转33度。 (为了清楚起见，我在CSS声明中删除了供应商前缀 )：

div.3d-container {
	perspective: 1000px;
}
div.3d-container img {
	width: 33%;
	transform: rotateY(33deg);
}

The image will automatically be one-third the width of its container, which, in turn, will be 100% the width of its parent element. By default, the perspective point will be exactly at the center of the <div>. Assuming there are no fixed widths anywhere, that means that resizing the viewport will not only decrease the width of the <div> and dimensions of the image, but also move the vanishing point. If you’re on a desktop browser, you can see the phenomenon by resizing your window: with the browser wide, the perspective on the image looks correct, but as you narrow the window, the perspective gets tighter, and the image flattens out, with the 3d effect becoming less apparent.

图像将自动为其容器宽度的三分之一，而容器的宽度又将为其父元素的宽度的100％。 默认情况下，透视点将精确地位于<div>的中心。 假设任何地方都没有固定的宽度，这意味着调整视口的大小不仅会减小<div>的宽度和图像的尺寸，还会移动消失点。 如果您使用的是台式机浏览器，则可以通过调整窗口大小来查看这种现象：在浏览器宽的情况下，图像上的透视图看起来正确，但是当您缩小窗口时，透视图会变紧，图像变平， 3D效果变得不太明显。

Whether this is a good or bad thing is largely a matter of (ahem) perspective.

这是好事还是坏事很大程度上取决于( 敬畏 )观点。

仅使用一个3D容器来确保多个元素共享相同的视角 (Use Just One 3D Container To Ensure That Multiple Elements Share The Same Perspective)

As our markup becomes more complex it’s natural to nest elements. This creates a problem when each of those containing elements is provided with a separate perspective value, even if the values are the same. For example, let’s look at the effect of placing two images side-by-side in the same <div>, using the same CSS as above:

随着我们的标记变得越来越复杂，嵌套元素是很自然的。 当为每个包含元素的元素提供单独的透视值时， 即使这些值相同 ， 也会产生问题。 例如，让我们看一下使用与上述相同CSS将两个图像并排放置在同一<div>中的效果：

You can see that both images angle towards the same vanishing point. Now let’s place the images in separate div elements, with both containers using the same class:

您可以看到两个图像都朝向相同的消失点倾斜。 现在，将图像放置在单独的div元素中，两个容器都使用同一类：

<div class="3d-container">
	<img src="shanghai-at-night.jpg" alt="Photograph of Shanghai at night">
</div>
<div class="3d-container">
	<img src="sydney-harbour.jpg" alt="Photograph of Sydney Harbour">
</div>

As you can see, each image now tends toward the vanishing point of its container. Bottom line: unless you want to create disorienting, Inception-like effects, keep elements you’re trying to affect with 3D in the same container, or use the technique below.

如您所见，每个图像现在都趋向于其容器的消失点。 底线：除非您要创建迷离， 类似Inception的效果，否则将尝试使用3D影响的元素放在同一容器中，或者使用以下技术。

强制子元素继承3D (Force Child Elements To Inherit 3D)

What if you absolutely had to nest elements that will have 3D transforms applied? Let’s keep the basic structure of our code, strip off the classes, and add the obvious: another container around both elements.

如果您绝对必须嵌套将应用3D变换的元素怎么办？ 让我们保留代码的基本结构，剥离类 ，并添加明显的内容：两个元素周围的另一个容器。

<div class="3d-container">
	<div>
		<img src="shanghai-at-night.jpg" alt="Photograph of Shanghai at night">
	</div>
	<div>
		<img src="sydney-harbour.jpg" alt="Photograph of Sydney Harbour">
	</div>
</div>

While this will look fine in current versions of Chrome and Safari, there’s a problem in Firefox: child elements don’t inherit 3D transforms the way they should in Mozilla’s browser. (Remember when I said that CSS 3D wasn’t without its bugs, even in browsers that had dropped vendor requirements for the properties? Yeah, that).

虽然在当前版本的Chrome和Safari中看起来不错，但是Firefox中存在一个问题：子元素不会继承3D转换，而Mozilla浏览器中的方式应该如此。 (请记住，当我说CSS 3D并非没有bug时 ，即使在已经放弃了供应商对属性要求的浏览器中也是如此)。

To get propagate 3D through to child elements, place transform-style:preserve-3d on their parents:

若要将3D传播到子元素， 请将 transform-style:preserve-3d 放在其父元素上：

div.container {
	perspective: 1000px;
	border: 1px solid red;
}
div.container div {
	transform-style:preserve-3d;
}
div.container div img {
	max-width: 50%;
	transform: rotateY(33deg);
}

This will allow the images to inherit the 3D perspective and transform correctly. It also means that 3D transforms of the parent elements will affect their children, making complex multi-layered 3D transforms possible.

这将允许图像继承3D透视图并正确转换。 这也意味着父元素的3D变换将影响其子元素 ，从而使复杂的多层3D变换成为可能。

Next in this series, we’ll look at one more common error in setting up 3D transforms, and how to use the syntax to improve the look and feel of your 2D transitions and animations.

在本系列的下一篇文章中，我们将探讨设置3D变换时的另一个常见错误，以及如何使用语法来改善2D过渡和动画的外观。

翻译自: https://thenewcode.com/657/Tips-amp-Tricks-In-CSS-3D

css 3d