Safari 移动变换式平面无法正常工作答案

【问题标题】：Safari mobile transform-style flat not workingSafari 移动变换式平面无法正常工作
【发布时间】：2017-06-24 00:23:29
【问题描述】：

我遇到了一个奇怪的变换样式错误（？），在变换样式设置为平面时，后元素会剪切文本。

我制作了一个显示问题的 CodePen。
左：变换样式：扁平；（我希望在所有浏览器中看起来像，只有在 safari mobile 中没有）
右：变换样式：preserve-3d；（它在移动设备上的两边看起来如何）

transform-style: preserve-3d; // how it displays on safari mobile
transform-style: flat; // how i would like to display it on safari mobile

CodePen：http://codepen.io/anon/pen/WRKjZw
谢谢

【问题讨论】：

你有没有想过这个问题。我也有同样的问题

标签： css css-transforms

【解决方案1】：

试试这个。

transform: rotateX(-40deg) rotateY(20deg) rotateZ(0deg);
-webkit-transform: rotateX(-40deg) rotateY(20deg) rotateZ(0deg);
-ms-transform: rotateX(-40deg) rotateY(20deg) rotateZ(0deg);
transform-style: flat;
-webkit-transform-style: flat;

【讨论】：

Safari 不再需要 -webkit- 前缀来进行转换