bxslider 的 Safari css 旋转问题答案

【问题标题】：Safari css rotate issue with bxsliderbxslider 的 Safari css 旋转问题
【发布时间】：2015-04-17 11:44:17
【问题描述】：

我已经用 360 度的 css 旋转制作了 bxSlider。这在除 Safari 之外的所有浏览器中都可以正常工作。

谁能帮我解决这个问题？请找到链接here。代码如下：

    $('#TestimonialUL').bxSlider({
    pager: false,
    mode: 'fade',
    onSliderLoad: function () {
        $('#TestimonialUL > li').eq(0).addClass('active-slide');
    },
    onSlideNext: function (){
        $('#TestimonialUL').css({
            'transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            '-o-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            '-moz-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            '-webkit-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
            '-moz-backface-visibility': 'hidden',
            '-webkit-backface-visibility': 'hidden',
            'backface-visibility': 'hidden',
            '-o-transform': 'rotateY(-360deg)',
            '-moz-transform': 'rotateY(-360deg)',
            '-webkit-transform': 'rotateY(-360deg)',
            'transform': 'rotateY(-360deg)'
        }); 

        $('.client-innerBG .bx-viewport').css({
            '-o-perspective': '800px',
            '-moz-perspective': '800px',
            '-webkit-perspective': '800px',
            'perspective': '800px',
            '-webkit-transform-origin': 'top left',
            'transform-origin': 'top left',
            '-webkit-transform-style': 'preserve-3D',
            'transform-style': 'preserve-3D'
        });     

    },  
    onSlidePrev: function (){
        $('#TestimonialUL').css({
            '-o-transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            '-moz-transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            '-webkit-transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            'transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
            '-webkit-backface-visibility':'hidden',
            'backface-visibility':'hidden',
            '-o-transform': 'rotateY(360deg)',
            '-moz-transform': 'rotateY(360deg)',
            '-webkit-transform': 'rotateY(360deg)',
            'transform': 'rotateY(360deg)'
        }); 
        $('.client-innerBG .bx-viewport').css({
            '-o-perspective': '800px',
            '-moz-perspective': '800px',
            '-webkit-perspective': '800px',
            'perspective': '800px',
            '-webkit-transform-origin': 'top left',
            'transform-origin': 'top left',
            '-webkit-transform-style': 'preserve-3D',
            'transform-style': 'preserve-3D'
        }); 

    },
    onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
        //console.log(currentSlideHtmlObject);
        $('.active-slide').removeClass('active-slide');
        $('#TestimonialUL > li').eq(currentSlideHtmlObject).addClass('active-slide');

        $('#TestimonialUL').css({
            'transition':'0',
            '-o-transition':'0',
            '-moz-transition':'0',
            '-webkit-transition':'0', 
            '-moz-backface-visibility': 'hidden',
            '-webkit-backface-visibility': 'hidden',
            'backface-visibility': 'hidden',
            '-o-transform': 'rotateY(0deg)',
            '-moz-transform': 'rotateY(0deg)',
            '-webkit-transform': 'rotateY(0deg)',
            'transform': 'rotateY(0deg)'
        });
        $('.client-innerBG .bx-viewport').attr('style','');

    }

});

【问题讨论】：

感谢 blackbishop 编辑问题。我是stockoverflow的新手。从你那里学到了很好的东西。

标签： jquery css safari bxslider rotatetransform

【解决方案1】：

当您使用 CSS 规则 -webkit-transition 时，您需要引用转换规则。对于 webkit，您需要引用 -webkit-transform 规则而不是 transform 规则。

所以'-webkit-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s' 需要是'-webkit-transition': '-webkit-transform 0.8s cubic-bezier(1, 0, 0, 1) 0s'。

请注意，您可能还需要对 -moz 前缀规则执行相同操作，以更好地针对旧版本的 firefox。

【讨论】：