jquery怎么做翻转效果？ [英] jquery how to do a flip effect?

问题描述

我正在尝试模仿通常在移动设备上找到的效果，当你有一个面板时，当你单击一个按钮时，它会旋转，另一边则会有一些其他信息。

i am trying to mimic an effect found usually on mobile devices where you have a panel and when u click a button it spins around and on the other side it has some other info.

我找到了一些使用css过渡的代码，这里是一个例子

i found some code that usses css transitions and here is an example

js

$('#signup').on('click', function(e) {
    e.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip flip-side-1';
    document.getElementById( 'side-1' ).className = 'flip flip-side-2';

});

$('#create').on('click', function(e) {
    e.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip';
    document.getElementById( 'side-1' ).className = 'flip';

});

此示例的问题是，如果我将javascript转换为jquery，它会停止工作：

the issue with this example is that if i convert javascript into jquery it stopps working:

来自：

 document.getElementById( 'side-2' ).className = 'flip flip-side-1';

到

$( '#side-2' ).addClass('flip flip-side-1');

此外，我还不确定是否还有一个jquery插件以更好的方式执行此操作。

Also im not sure if there isn't already a jquery plugin that does this in a better way.

任何想法？

更多代码。
html

some more code. html

<div id="side-1" class="flip">
    <a id="signup" href="#">sign up</a>
</div>
<div id="side-2" class="flip">
    <a id="create" href="#">create</a>
</div>

css

.flip {
    backface-visibility:             hidden;
        -moz-backface-visibility:    hidden;
        -ms-backface-visibility:     hidden;
        -o-backface-visibility:      hidden;
        -webkit-backface-visibility: hidden;
    border: 1px solid black;
    transform-origin:             50% 50% 0px;
        -moz-transform-origin:    50% 50% 0px;
        -ms-transform-origin:     50% 50% 0px;
        -o-transform-origin:      50% 50% 0px;
        -webkit-transform-origin: 50% 50% 0px;
    transition: all 1s;
        -moz-transition:    all 1s;
        -ms-transition:     all 1s;
        -o-transition:      all 1s;
        -webkit-transition: all 1s;
}

#side-1 {
    transform:             rotateY( 0deg );
        -moz-transform:    rotateY( 0deg );
        -ms-transform:     rotateY( 0deg );
        -o-transform:      rotateY( 0deg );
        -webkit-transform: rotateY( 0deg );
}

#side-2 {
    transform:             rotateY( 180deg );
        -moz-transform:    rotateY( 180deg );
        -ms-transform:     rotateY( 180deg );
        -o-transform:      rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
}

.flip-side-1 {    
    transform:             rotateY( 0deg ) !important;
        -moz-transform:    rotateY( 0deg ) !important;
        -ms-transform:     rotateY( 0deg ) !important;
        -o-transform:      rotateY( 0deg ) !important;
        -webkit-transform: rotateY( 0deg ) !important;
}

.flip-side-2 {
    transform:             rotateY( 180deg ) !important;
        -moz-transform:    rotateY( 180deg ) !important;
        -ms-transform:     rotateY( 180deg ) !important;
        -o-transform:      rotateY( 180deg ) !important;
        -webkit-transform: rotateY( 180deg ) !important;
}

推荐答案

http://lab.smashup.it/flip/ 是我发现的最好的。

这篇关于jquery怎么做翻转效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！