CSS转换问题Safari
CSS转换问题Safari
提问于 2017-10-09 16:25:42
我在这个页面上有一个翻盖动画，https://muttcase.com.au/products/call-my-mum-shes-lost-without-me，它在除了safari之外的所有浏览器上都工作得很完美。我试过前缀，但我迷路了。使用的css im是..。
/* entire container, keeps perspective */
.product-single__photos {
perspective: 1000px;
}
.product-single__photos, .front, .back {
width: 320px;
height: 420px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
.flippy .flipper, .product-single__photos.flippy .flipper, .product-
single__photos.flip .flipper {
transform: rotateY(180deg);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-09 16:53:34
为了让它在Safari中发挥作用，我解决了几个问题：
- 您的
.front元素为空。检查您的HTML，我假设您想要这样做，将#ProductImageWrapper...元素放在.front中。这可能是由于HTML中的语法问题或未关闭的<div>标记造成的。 - 在
.front和.back元素上都不需要使用.back。您的代码示例不会以这种方式显示，但是您链接的站点上的代码会显示出来。
然后，"Flip“按钮会落在元素后面，因为前面的兄弟姐妹中的所有元素现在都是(如您所期望的) position: absolute。如果你对另一个问题有意见，可以继续发帖。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46656906
复制
相似问题
Safari CSS高度转换问题
css转换的Safari问题
关于Safari的CSS转换问题
Safari中的CSS转换问题
Safari中标签上的CSS转换问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
