Question

我已经使bxSlider的css旋转360度。这在除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','');

    }

});

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旋转问题

1 个答案: