更多关于CSS 3D属性的技巧-平滑转换和浮动元素

上一篇文章中我们讲解了一些关于制作CSS 3D内容时的技巧和常见问题-使用CSS 3D属性的提示和技巧。在这篇文章中，我们将讲解更多这方面的内容。

元素使用Transform时的边缘平滑问题

使用CSS对元素（特别是图片）进行3D旋转时多少都会出现一些锯齿边的情况，锯齿边的多少依赖于浏览器和GPU。目前，它对Firefox浏览器的影响特别大。

下面的CSS没有使用浏览器厂商的前缀。

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

我们只有期待这种情况在不久的将来得到改善。现在，有一个简单方法来处理这种情况：增加1像素透明的外边框。

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

得到的结果如下图所示：

3D Perspective中的浮动元素

很多时候，我们在图片上使用 perspective 时却得不到正确的结果。这个问题我们称之为“float flag”：浮动元素不会支撑它的父容器的高度。（这个问题同样会发生在设置元素为position: fixed或absolute的时候）

举个例子，一个div中放置一张图片，然后对它使用CSS 3D Perspective，但是图片设置为浮动。下图中的红线是div的边框。

<div class="taj">
    <img src="taj-mahal-full.jpg" alt="" style="width:300px">
</div>                                
                            

CSS样式

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

对于一个浮动元素，它的3D 透视点消失在坍缩的div中，从而会改变图片的定位。根据情况的不同，这种改变有所不同。但是解决这个问题的方法总是相同的：确保容器中的3D透视元素获得正确的尺寸。有多种方法可以达到这个目的：添加一个clearfix类、设置overflow: hidden、附加padding或这三种方法的组合。