CSS转换问题Safari

Question

我在这个页面上有一个翻转动画https://muttcase.com.au/products/call-my-mum-shes-lost-without-me它在除safari之外的所有浏览器中都能很好地工作。我尝试了前缀，但我迷路了。使用的CSS是...

/* 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);
}

Answer 1

我决定让一些问题在Safari中运行良好：

1. 您的.front元素为空。检查您的HTML，我认为您想要这个，将#ProductImageWrapper...元素放在.front中。这可能是由于HTML中存在语法问题或未关闭的<div>标记。
2. 您在transform: rotateY(180deg)和.front元素上都不需要.back。您的代码示例不会以这种方式显示，但您链接的网站上的代码会显示。

＆＃34;翻转标签＆＃34;然后按钮落在元素后面，因为前面兄弟中的所有元素现在（按照您的意图）position: absolute。如果您对该问题有疑问，请继续发布另一个问题。