动画在 iOS 8 本地环境中看起来很奇怪答案

【问题标题】：Animation looking odd on iOS 8 local environment动画在 iOS 8 本地环境中看起来很奇怪
【发布时间】：2016-03-14 15:18:39
【问题描述】：

您好，我有一个项目页面，其中包含三张卡片，它们以不同的时间依次翻转。

它在除 iOS Safari

有趣的是，如果我得到我的独立代码并将其放在 codepen 上，然后在设备或模拟器 (Xcode) 上尝试该 codepen，它看起来正确，但在我的本地环境中不行

这是密码笔

http://codepen.io/dannygm/pen/ONXWJj

代码

.silhouettes-container{margin:0 auto; padding: 0 16px 0 16px; text-align: center; width:100%;}

button{background: blue; color: #fff; padding: 20px;cursor:pointer;}

.flip-silhouette {display:inline-block; height:100px; position:relative; width:100px; z-index:1000;}

.flip-silhouette .front,
.flip-silhouette .back {display:block; height:100px; position:absolute; -webkit-backface-visibility:hidden; backface-visibility:hidden;  -webkit-transition:-webkit-transform 1s; transition:transform 1s; -webkit-transition:transform 1s; width:100px;}
.flip-silhouette .front {transform:perspective(300) rotateY(0); -webkit-transform:perspective(300) rotateY(0); z-index:900;}
.flip-silhouette .back {-webkit-transform:rotateY(-180deg); transform:rotateY(-180deg); z-index:800;}
.flipped .front {transform:rotateY(180deg); transform:perspective(300) rotateY(180deg); -webkit-transform:rotateY(180deg); -webkit-transform:perspective(300) rotateY(180deg);}
.flipped .back {z-index:950; transform:rotateY(0deg); -webkit-transform:rotateY(0deg); -webkit-transform:perspective(300) rotateY(0deg); transform:perspective(300) rotateY(0deg);}


.flipped .back1, .flipped .front1{transition-delay:0.8s; -webkit-transition-delay:0.8s;}
.flipped .back2, .flipped .front2{transition-delay:1s; -webkit-transition-delay:1s;}
.flipped .back3, .flipped .front3{transition-delay:1.2s; -webkit-transition-delay:1.2s;}

在这个 GIF 中，您可以看到它在我的本地环境中的外观。（顺便说一句，我剥离了我的页面以仅包含卡片，还从视图中删除了所有内容，我正在使用 handlebars.js）

有什么可能导致它的想法或帮助吗？

【问题讨论】：

不是 100% 确定这一点，但您能否尝试从所有当前转换中删除 perspective(300)，并添加：.silhouettes-container { perspective:300 }？
谢谢 Leon，我会试一试告诉你

标签： css safari css-transforms ios8.1

【解决方案1】：

尝试从所有当前转换中删除 perspective: 300 并添加：

.silhouettes-container { 
    -webkit-perspective: 300;
    perspective: 300;
}

目前我自己无法测试它，因为我没有装有 iOS8 的设备，但这是我通常这样做的方式（而且我以前从未遇到过 iOS8 的问题），如果你谷歌“ios 8 透视 bug css”似乎还有其他人在使用转换属性中的透视时在 iOS8 上遇到转换问题（尽管我找不到包含完全相同问题的任何帖子的明确示例） .

【讨论】：