css 浮动元素_CSS 3D的更多技巧和窍门：平滑变换和固定浮动元素

css 浮动元素

Previously I’ve talked about common errors made in developing CSS 3D content. Today’s article will discuss another one, plus a bonus technique.

以前，我已经讲过在开发CSS 3D内容时遇到的常见错误 。 今天的文章将讨论另一种，以及奖金技巧。

平滑变形元素的边缘 (Smoothing The Edges of Transformed Elements)

Rotating elements (especially images) in three dimensions using CSS can result in jagged edges that lack antialiasing, depending on the browser build and GPU. Right now, Firefox is particularly affected by this.

使用CSS在3维上旋转元素(尤其是图像)可能会导致锯齿状边缘缺少抗锯齿效果，具体取决于浏览器的版本和GPU。 目前，Firefox受此影响特别大。

The CSS, shown without vendor prefixes to save space:

显示的CSS (不含供应商前缀)可以节省空间：

.church {
	perspective: 700px;
	padding: 2rem;
}
.church img {
	transform: rotateY(12deg);
}

Rotated element without smoothing applied, as viewed in Firefox

在Firefox中查看时未应用平滑的旋转元素

While I expect this visual treatment to improve in the near future, right now there is a simple fix: adding a 1 pixel thick transparent outline:

虽然我希望这种视觉处理在不久的将来会有所改善，但现在有一个简单的解决方法：添加1像素厚的透明轮廓：

.church img {
	transform: rotateY(12deg);
	outline: 1px solid transparent;
}

The live result looks like this:

实时结果如下所示：

Rotated element with smoothing applied

旋转元素已应用平滑

折叠的容器影响3D透视 (Collapsed Containers Affect 3D Perspective)

It’s a behaviour that’s confused me more than once: perspective doesn’t appear to be applied to images correctly, despite the fact that I’ve triple-checked the code. The issue is due to what I’ve called the “float flag” quirk: floated elements do not contribute to the height of their containers. (The same issue occurs with elements given position: fixed or absolute). As a result, the perspective vanishing point shifts.

这种行为使我不止一次困惑：尽管我已经对代码进行了三遍检查，但perspective似乎并没有正确地应用于图像。 问题是由于我所谓的“ 浮动标志 ”怪癖： 浮动元素不会增加其容器的高度 。 (在给定position: fixed元素上发生相同的问题position: fixed或absolute )。 结果， perspective消失点移动。

For example, a simple image inside a <div>, with CSS 3D applied, but with the image floated. I’ve added a border to the <div> to show its area and shape:

例如， <div>内的一个简单图像，已应用CSS 3D ，但该图像是浮动的。 我在<div>上添加了边框以显示其面积和形状：

A floated 3D element

浮动的3D元素

<div class="taj">
	<img src="taj-mahal-full.jpg" alt="A photograph the Taj Mahal at sunset"  style="width:300px">
</div>

The CSS:

CSS：

.taj {
	perspective: 700px;
	border: 1px solid red;
}
.taj img {
	transform: rotateY(12deg);
	float: left;
	outline: 1px solid transparent;
}

With a floated element, the 3D vanishing point is “buried” in the collapsed div, changing the orientation of the image. Depending on circumstances, this shift can be subtle or bizarre. The solution, however, is always the same: ensure that the container reflects the actual size of the 3D elements inside it. There are a number of ways you could do this: adding a clearfix solution, overflow: hidden, extra padding, or some combination of the three.

使用浮动元素时，3D消失点将“隐藏”在折叠的div ，从而改变图像的方向。 根据情况，这种转变可能是微妙的或奇怪的。 但是，解决方案始终是相同的： 确保容器反映其中的3D元素的实际大小 。 您可以通过多种方式执行此操作：添加clearfix解决方案， overflow: hidden ，extra padding或这三者的某种组合。

翻译自: https://thenewcode.com/689/More-Tricks-and-Tips-For-CSS-3D-Smoothing-Transforms-amp-Fixing-Floated-Elements

css 浮动元素