在點擊Javascript變換

我想實現一個翻轉卡效果點擊一個按鈕，但我不能完全弄清楚的Javascript。我其實對JavaScript一無所知，所以我試圖找到類似的解決方案，並根據我的需要改變它們，但沒有結果。下面是CSS如何作爲:hover風格。在點擊Javascript變換

你可以在這裏查看：http://dangoodeofficial.co.uk/290-2

CSS：

.flip3D { 
    float: left; 
    display: block; 
    position: relative; 
    width: auto; 
    height: 675px; 
    } 

.flip3D .front { 
    position: absolute; 
    -o-transform: perspective(600px)RotateY(0deg); 
    -moz-transform: perspective(600px)RotateY(0deg); 
    -ms-transform: perspective(600px)RotateY(0deg); 
    -webkit-transform: perspective(600px)RotateY(0deg); 
    transform: perspective(600px)RotateY(0deg); 
    -o-transform-backface-visibility: hidden; 
    -moz-transform-backface-visibility: hidden; 
    -ms-transform-backface-visibility: hidden; 
    -webkit-transform-backface-visibility: hidden; 
    backface-visibility: hidden; 
    transition: -o-transform .5s linear 0s; 
    transition: -moz-transform .5s linear 0s; 
    transition: -ms-transform .5s linear 0s; 
    transition: -webkit-transform .5s linear 0s; 
    transition: transform .5s linear 0s; 
    width: 100%; 

} 

.flip3D .back { 
    position: absolute; 
    -o-transform: perspective(600px)RotateY(180deg); 
    -moz-transform: perspective(600px)RotateY(180deg); 
    -ms-transform: perspective(600px)RotateY(180deg); 
    -webkit-transform: perspective(600px)RotateY(180deg); 
    transform: perspective(600px)RotateY(180deg); 
    -o-transform-backface-visibility: hidden; 
    -moz-transform-backface-visibility: hidden; 
    -ms-transform-backface-visibility: hidden; 
    -webkit-transform-backface-visibility: hidden; 
    backface-visibility: hidden; 
    transition: -o-transform .5s linear 0s; 
    transition: -moz-transform .5s linear 0s; 
    transition: -ms-transform .5s linear 0s; 
    transition: -webkit-transform .5s linear 0s; 
    transition: transform .5s linear 0s; 
    width: 100%; 
} 

.flip3D:hover > .front { 
    -o-transform: perspective(600px)RotateY(-180deg); 
    -moz-transform: perspective(600px)RotateY(-180deg); 
    -ms-transform: perspective(600px)RotateY(-180deg); 
    -webkit-transform: perspective(600px)RotateY(-180deg); 
    transform: perspective(600px)RotateY(-180deg); 

} 

.flip3D:hover > .back { 
    -o-transform: perspective(600px)RotateY(0deg); 
    -moz-transform: perspective(600px)RotateY(0deg); 
    -ms-transform: perspective(600px)RotateY(0deg); 
    -webkit-transform: perspective(600px)RotateY(0deg); 
    transform: perspective(600px)RotateY(0deg); 

}

而且我有帶班.flip-button正面和.flip-back的後退按鈕。

任何意見將不勝感激。謝謝。

丹

來源

2015-04-28 Daniel Johnson

也在這裏發佈您的相關HTML和JavaScript。 – dowomenfart

我發現這個plugin。它可以幫助你。而這裏是做翻頁效果插件的列表：http://www.sitepoint.com/10-jquery-flip-effect-plugins/

編輯

這可能幫助你！我只在.front和.back之間切換類.flip。（http://jsfiddle.net/0x13mL26/3/）

對不起，誤會！ :)

來源

2015-04-28 13:53:23

感謝您使用插件提示。我已經嘗試了幾個插件來實現這一點，但無法得到我想要的結果，這就是爲什麼我試圖在沒有插件的情況下做到這一點。再加上它是擴展我的知識的好方法。 –

你想做你自己的！ ;），這是一個很好的推理，我喜歡它！ :) –

我編輯了我的答案！ :) –

我知道你問的JavaScript，但我的解決方案是與JQuery。使用每個按鈕上的點擊功能，然後您可以使用Jquery的.removeClass和.addClass方法更改單擊按鈕時需要翻轉的卡的類。像這樣的東西應該工作：

$("#frontbutton").click(function() { 

    $("#flipcard").addClass('back'); 
    $("#flipcard").removeClass('front'); 
    $("#frontbutton").css("display","none"); 
    $("#backbutton").css("display","static"); 

}); 


$("#backbutton2").click(function() { 

    $("#flipcard").addClass('front'); 
    $("#flipcard").removeClass('back'); 
    $("#backbutton").css("display","none"); 
    $("#frontbutton").css("display","static"); 

});

，當然你要隱藏的「後退按鈕」開始。

所以，當你點擊前面的按鈕，它會改變你翻轉的「flipcard」的類。然後，「前面按鈕」將隱藏起來，並在其位置上放置現在可見的「後退按鈕」。當後退按鈕被點擊時，它應該觸發相同的過程，但是相反。

來源

2015-04-28 14:50:53

嗨，謝謝你。我嘗試過嘗試它，但不幸的是我無法得到它的工作。但我會繼續試驗。 –

在點擊Javascript變換

回答

相關問題