課程
/前端開發(fā)
/HTML/CSS
/CSS3+JS 實現(xiàn)超炫的散列畫廊特效
為什么我的沒有翻轉(zhuǎn)呢???當點擊的時候?class名字沒有改變?還是原來的?'photo_front'
2018-12-30
源自:CSS3+JS 實現(xiàn)超炫的散列畫廊特效 2-3
正在回答
圖片界面樣式,
.photo-front .photo-wrap .side-front{
-webkit-transform: rotateY(360deg);
}
.photo-front .photo-wrap .side-back{
-webkit-transform: rotateY(180deg);
描述界面樣式
.photo-back .photo-wrap .side-front{
.photo-back .photo-wrap .side-back{
-webkit-transform: rotateY(0deg);
通過點擊含有photo這個類的標簽 動態(tài)來回添加.photo-front和.photo-back
jq代碼
$(".photo").click(function(){
if($(this).hasClass("photo-front")==true){
$(this).removeClass("photo-front");
$(this).addClass("photo-back");
}else{
$(this).addClass("photo-front");
$(this).removeClass("photo-back");
})
慕俠2155777
舉報
實現(xiàn)更自由的切換照片的畫廊效果,打造超酷的切換動畫
1 回答點擊沒有翻轉(zhuǎn)效果
6 回答為什么我點擊鼠標沒有翻轉(zhuǎn)效果,郁悶!
1 回答點擊按鈕圖片重新排序,但是中間圖片不翻轉(zhuǎn)?點擊圖片可以翻轉(zhuǎn)
1 回答沒有翻轉(zhuǎn)效果
2 回答沒有3d翻轉(zhuǎn)效果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2019-01-02
圖片界面樣式,
.photo-front .photo-wrap .side-front{
-webkit-transform: rotateY(360deg);
}
.photo-front .photo-wrap .side-back{
-webkit-transform: rotateY(180deg);
}
描述界面樣式
.photo-back .photo-wrap .side-front{
-webkit-transform: rotateY(180deg);
}
.photo-back .photo-wrap .side-back{
-webkit-transform: rotateY(0deg);
}
通過點擊含有photo這個類的標簽 動態(tài)來回添加.photo-front和.photo-back
jq代碼
$(".photo").click(function(){
if($(this).hasClass("photo-front")==true){
$(this).removeClass("photo-front");
$(this).addClass("photo-back");
}else{
$(this).addClass("photo-front");
$(this).removeClass("photo-back");
}
})