javascript - 画像の回転と隠しメニュー

Question

私はここで彼らのナビゲーションが本当に好きで、主に彼らがどのようにして画像をスムーズに回転させたのか（jQueryプラグインを想定していますが、メニューアイコン自体は回転しません）、およびメニューがどのようにオンになっているのかを知りたいです.画像をクリックしてオフにします。

ソースコードを見てみましたが、CSS が判読できません。

PS すべては IE でも動作します。

Answer 1

彼らはCSS トランジションを使用しています。

彼らが使用する画像を変えるには：

.active .icon-menu {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

そしてそれをアニメーション化するために、彼らは以下を使用します:

.icon-menu {
    transition: transform .3s cubic-bezier(0.785,0.135,0.15,0.86);
    -moz-transition: -moz-transform .3s cubic-bezier(0.785,0.135,0.15,0.86);
    -webkit-transition: -webkit-transform .3s cubic-bezier(0.785,0.135,0.15,0.86);
    -o-transition: -o-transform .3s cubic-bezier(0.785,0.135,0.15,0.86);
}

これらのスタイルが定義されている場合、アニメーションは基本的に、対応する要素の.activeクラスを追加または削除することによってトリガーされます。<a>