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 内的元素.这可能是由于语法问题或未关闭的 <div>在您的 HTML 中标记。
2. 你不需要transform: rotateY(180deg)在 .front 上和 .back元素。您的代码示例不会以这种方式显示，但您链接的网站上的代码会这样显示。

然后“翻转标签”按钮位于元素后面，因为前面同级中的所有元素现在(如您所愿)为 position: absolute .如果您对那个问题有疑问，请继续发布另一个问题。