如何在Safari中平滑旋转变换？

我第一次尝试使用CSS，但是当我被告知它在Safari上看起来有问题时，我尝试使用Greensock的Javascript库来查看它是否修复它。它仍然有相同的问题，仍然只在Safari上。经过一番研究，我看到它discussed on StackOverflow as a Safari bug。如何在Safari中平滑旋转变换？

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 /毛刺。

来源

2015-11-11 Ricardo Andres

正如你在你的问题本身表明张贴的解决方案，增加了translateZ（在GSAP方面只是表示z）要么.iconBG元素或.hoverImage元素应该解决您的问题。

这是您的演示的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(); });

是的，我已经改变了事情有点。个人喜好，在这里没有对错的方法。让我知道这是否有帮助。

来源

2015-11-11 18:26:23

你太棒了！这个答案解决了这个问题，我仍然在学习更好的实现。不幸的是，当我将它应用于实际项目时，并没有解决问题，但是这个答案确实解决了Codepen中出现的问题。谢谢 –

如何在Safari中平滑旋转变换？

回答

相关问题