使用jquery翻转图像

Question

我有多张图片，想要在3d和2d中逐个显示旋转图像。

HTML就像

<div><img src="1.jpg"></div>
<div><img src="2.jpg"></div>
<div><img src="3.jpg"></div>

等

所以我想通过前一个图像翻转和下一个翻转来显示图像。

我试过下面的代码

隐藏：

$hide.animate({ 
   transform: 'rotate(180deg)', 
   opacity: 0.1 
},
1500,
'easeInOutBack', 
function () { 
    $(this).hide(); 
});

显示：

$show.show().animate({ transform: 'rotate(180deg)', opacity: 1.0 },1500,'easeInOutBack');

但它不起作用。我仅使用jquery和jquery ui。

Answer 1

你没有使用jQuery动画旋转，让CSS为你做这件事。

试试这个：

JS：

.show, .hide{transition:all 0.3s ease;}
.hide{opacity:0.1;transform:rotate(0deg);}
.show{opacity:1;transform:rotate(1800deg);}

的CSS：

text

希望有所帮助。

修改

如果您仍然希望使用jQuery而不是CSS，我建议使用http://nnattawat.github.io/flip/等插件

<强> EDIT2：

如果你仍然不想要CSS方法，而不是jQuery插件，我建议你看看这里： CSS rotation cross browser with jquery.animate()

  

＆＃34; CSS-Transforms无法使用jQuery进行动画制作。您可以   做这样的事[代码示例]＆＃34;

我还创建了一个演示这种方法的小提琴：http://jsfiddle.net/jhcvb2ty/

Answer 2

  

基本动画不能为非数字CSS属性设置动画。

所以在动画中使用步进功能然后它可以工作。

参见示例： http://jsfiddle.net/kevalbhatt18/epp06LL3/2/

的

的

 $('#box').animate({  transformValue: -180 }, {
    step: function(now,fx) {
      $(this).css('transform','rotatex('+now+'deg)');  
    },
    duration:'slow'
},'linear');

的

修改

参见示例： http://jsfiddle.net/kevalbhatt18/u2ptr4jp/4/

现在只需在父范围内添加div，它就可以适用于所有人。

  

注意：只有你应该知道的第一堂课，即在这个例子中我们有   框类如果我们在最后一个框中，那么它将翻到第一个框

的

的

$("div").click(function() {
    var that = this;
    $(this).animate({
        transformValue: -180
    }, {
        step: function(now, fx) {
            $(this).css('transform', 'rotatey(' + now + 'deg)');
        },
        complete: function() {
            $(that).hide();
            //$('#box').removeAttr( 'style' );
            var nextObject = $(that).next()
             var nextClass = nextObject.attr('class')
            console.log($('#parent').children().hasClass(nextClass));
            if ($('#parent').children().hasClass(nextClass)) {
                var flipNext = nextClass;
                console.log("true")
            } else {
                console.log("false")
                var flipNext = "box";
                console.log(flipNext);
            }

            secondFlip(flipNext, that);


        },
        duration: 'slow'
    }, 'linear');


});

function secondFlip(nextID, that) {
    $('.' + nextID).show();
    $('.' + nextID).animate({
        transformValue: 180
    }, {
        step: function(now, fx) {
            $(this).css('transform', 'rotatex(' + now + 'deg)');
        },
        complete: function() {

        },
        duration: 'slow'
    }, 'linear');

}

的

修改：已解决轮换问题

请参阅此示例：http://jsfiddle.net/kevalbhatt18/u2ptr4jp/6/

  

最终输出：

经过这么多托盘我找到了解决方案。

请参阅此示例：http://jsfiddle.net/kevalbhatt18/oh07zuh0/

听到我发现转化程度。

的

的

(function ($) {
    $.fn.rotationDegrees = function () {
        var matrix = this.css("-webkit-transform") || this.css("-moz-transform") || this.css("-ms-transform") || this.css("-o-transform") || this.css("transform");
        if (typeof matrix === 'string' && matrix !== 'none') {
            var values = matrix.split('(')[1].split(')')[0].split(',');
            var a = values[0];
            var b = values[1];
            var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
        } else {
            var angle = 0;
        }
        return angle;
    };
}(jQuery));

的