Safari css bxslider 旋转问题

Question

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

谁能帮我解决这个问题？请找到 link 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','');

    }

});

Answer 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。

Safari css bxslider 旋转问题

Safari css rotate issue with bxslider

css

safari

jquery

rotatetransform

bxslider