如何在 Safari 中平滑 rotateY 变换？

Question

我第一次尝试使用 CSS，但当我得知它在 Safari 上看起来有问题时，我尝试使用 Greensock 的 Javascript 库看它是否修复了它。它仍然有同样的问题，仍然只在 Safari 上。经过一番研究后，我看到了它 discussed on Whosebug as a Safari bug。

Codepen example

jQuery(function($){
var iconsHoverIn = function() {
    TweenMax.to($(this).find('.iconBG'), 0.5, {
        rotationY: 180, 
        opacity: 0
        }
    );
    TweenMax.to($(this).find('.hoverImage'), 0.5, {
        rotationY: '-180', 
        opacity: 1
        }
    );
}
var iconsHoverOut = function() {
    TweenMax.to($(this).find('.iconBG'), 0.5, {
        rotationY: 0, 
        opacity: 1
        }
    );
    TweenMax.to($(this).find('.hoverImage'), 0.5, {
        rotationY: 0, 
        opacity: 0
        }
    );
}

$('.iconBlock').hover(iconsHoverIn, iconsHoverOut);

});

错误是：在进行过渡时，元素的一半似乎与另一半的过渡方式不同。它在中间显示了一条线，就像元素是纸做的并且对折一样。

有什么办法吗？我向客户展示了几个动画，但这个动画（rotateY）是一致的选择。

注意：我对 Javascript 和 Greensock 比较陌生。您可能会注意到做我所做的事情的更好方法。我不介意改进它的建议，但我真正想要的是 bug/glitch.

的解决方案

Answer 1

正如您在问题中发布的解决方案本身所建议的那样，向 .iconBG 元素或 .hoverImage 添加 translateZ（在 GSAP 术语中仅表示 z）元素应该可以解决您的问题。

这里是你的demo的forked codepen，代码如下：

JavaScript:

var iconBlocks = $('.iconBlock');
var iconBGs = iconBlocks.find('.iconBG');
var hoverImages = iconBlocks.find('.hoverImage');
var animDuration = 0.4;
var animEase = Power2.easeOut;
var numIcons = iconBlocks.length;
var timelines = [];
var timeline = null;
for (var i = 0; i < numIcons; i += 1) {
  timeline = new TimelineMax({ paused: true });
  timeline.fromTo(iconBGs[i], animDuration, { z: 0, rotationY: 0, autoAlpha: 1 }, { rotationY: 180, autoAlpha: 0, ease: animEase }, 0);
  timeline.fromTo(hoverImages[i], animDuration, { z: 100, rotationY: 180, autoAlpha: 0 }, { rotationY: 0, autoAlpha: 1, ease: animEase }, 0);
  timelines[i] = timeline;
}
iconBlocks.hover(function() { timelines[$(this).index()].play(); }, function() { timelines[$(this).index()].reverse(); });

是的，我做了一些改动。完全个人喜好，这里没有对错之分。如果这有帮助，请告诉我。

如何在 Safari 中平滑 rotateY 变换？

How can I smoothen rotateY transform in Safari?

javascript

safari

gsap