仅将透视 CSS 转换为容器，而不是内容

Question

当我尝试使用“perspective”属性然后“transform：rotateY(10deg)”时，效果也适用于子元素。我想要一个具有透视效果的矩形，但不希望内部的文本具有透视效果。任何想法？

我创建了一个 JSFIDDLE 示例 https://jsfiddle.net/j0ofgbLo/1/

.container {
    perspective: 500px;
}

.content{
   transform: rotateY(-45deg);
   background: #ddd;
    min-width: 100px;    
    padding: 0 20px;    
}

<div class="container">
    <div class="content">
        <h3>Text</h3>
    </div>
</div>

Answer 1

CSS 透视属性仅将透视应用于子项而不是其本身。要获得“非扁平”/透视结果，只需将此规则放在您的内容元素上：

transform-style: preserve-3d;

并将其放在您的 H3 元素上：

transform: rotateY(45deg);

如果内容元素被转换或具有透视图，它会构建一个包含块和一个堆叠上下文，因此无论如何，孩子们都被迫渲染到该层。这意味着您不能在转换后的上下文中使用固定元素（在 IE11+ 中可以）来跳过祖先转换。因此，您必须反转目标元素 (H3) 的透视变换才能获得不失真的结果。

transform-style: preserve-3d;

transform: rotateY(45deg);