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 中正常运行，我解决了几个问题：

您的 .front 元素是空的。检查您的 HTML，我假设您需要这个，将 #ProductImageWrapper... 元素放在 .front 中。这可能是由于语法问题或 HTML.

<div>

您不需要在 .front 和 .back 元素上都使用 transform: rotateY(180deg)。您的代码示例不会以这种方式显示，但您链接的网站上的代码会这样显示。

"Flip Tag" 按钮随后落在元素后面，因为前面同级中的所有元素现在（如您所愿）是 position: absolute。继续 post 另一个问题，如果您对此有疑问。

CSS 改造问题 Safari

CSS transform issue Safari

css

css-transforms