3D旋轉動畫面板單擊菜單鏈接

我需要認識到，與此非常相似的效果後顯示出來，點擊鏈接varoius，尤其是「FollowUs」和「搜索」。3D旋轉動畫面板單擊菜單鏈接

這是一個DIV的3D旋轉，它將內容推到底部。

我試圖調查它的代碼與督察，但我沒有找到一個插件，使這種可能的影響，也許可能是一個自定義的解決方案。

我試圖找到類似的東西，但最近我發現是3D Rotating Navigation，無論如何，這是我需要的更復雜。

總之，我只需要：

單擊鏈接
一個DIV將顯示與3D旋轉效果（如 kartell.com）
在這個DIV我有一個搜索形式或替代列表的社交鏈接，與鏈接網站完全一樣。

有什麼建議嗎？

來源

2015-05-13 Luca Detomi

您希望效果與kartell類似還是需要任何自定義？ –

我的客戶幾乎要求我重製當您點擊「FollowUS」和「Search」時打開的面板。在這些面板中，我還會再現相同的搜索表單或社交鏈接列表。 :-) –

在網頁上3D旋轉導航一切都解釋了（只需向下滾動一下）。

/* enable a 3D-space for children elements */ 
perspective: 1000px; 
transform: translateY(-100%);

約在視角的CSS屬性的一些文檔 http://www.w3schools.com/cssref/css3_pr_perspective.asp

所以basicly

1）抓住點擊 2）添加像div-3d-rotate或東西到div一類，你要的3D旋轉點擊時

您應該使用tranisition，perspective和transform css屬性。

您還需要一個額外的div來包裝您要旋轉的div。它應該有一個轉換來處理高度。

某種例如：http://jsfiddle.net/cncpv83a/6/

來源

2015-05-13 10:22:25

我閱讀插件頁面上的文檔，但不是一個真正的教程，只有一些關於特定插件的細節，沒有關於JS代碼的信息。我知道如何將「CSS旋轉」應用到元素，但這裏的問題更加複雜，因爲「CSS轉換」不會影響頁面中其他元素的位置，並且它們會繼續填充原始空間，而不會推動和其他內容...顯然在我的CAS我必須保持打開面板時，它在數字搜索條件，而不是自動關閉像鏈接插件 –

看看我上面的簡單例子。我不知道你的計劃是什麼，但在我的小提琴中，你可以看到如何將簡單的動畫應用到html元素。 –

當用戶點擊觸發元素時，類.nav-is-visible類將被添加到

和

你需要的是一個鏈接和麪板。鏈接上的點擊處理程序向面板添加「活動」或「顯示」類。

面板初始化的寬度和高度爲0，需要將過渡應用到面板。「顯示」或「主動」類的CSS使用旋轉進行變換。

HTML：

<div class="invoke">Invoke</div> 
<div class="panel"> 
    Yes this is the panel 
</div>

的Javascript：

$('.invoke').click(function(){ 
    $(".panel").addClass("show"); 
});

CSS：

.panel{ 
    overflow: hidden; 
    width: 0; 
    height: 0; 
    margin: 100px; 
    background-color: #ff0000; 
    /* Firefox */ 
    -moz-transition: all 1s ease; 
    /* WebKit */ 
    -webkit-transition: all 1s ease; 
    /* Opera */ 
    -o-transition: all 1s ease; 
    /* Standard */ 
    transition: all 1s ease; 
} 

.panel.show{ 
    width: 500px; 
    height: 500px; 
    /* Firefox */ 
    -moz-transform: rotate(360deg); 
    /* WebKit */ 
    -webkit-transform: rotate(360deg) ; 
    /* Opera */ 
    -o-transform: rotate(360deg) ; 
    /* Standard */ 
    transform: rotate(360deg) ; 
}

見我的小提琴

https://jsfiddle.net/cncpv83a/

來源

2015-05-13 10:32:29

感謝您的答案，但效果與我所要求的完全不同。請點擊[Kartell.com]（http://www.kartell.com）上的「FollowUs」和「Search」鏈接查看我需要的內容 –

3D旋轉動畫面板單擊菜單鏈接

回答

相關問題