rotateXの見た目が遠近を意識した形？にならない。

Question

前提・実現したいこと

こちらのサイトを模写しております。
ヘッダーナビhover時の動きにつきまして。
上から「パタンッ」ともう一つのナビリストが降りてくるアニメーションがあるかと思います。

アニメーション自体は作れます。
しかしながら、画像のように回転時の形が「台形あるいは遠近を意識した形」が再現できません。
何故このようにならないのか、その理由と解決策を知りたいです。

※画像は、cssをいじって、rotateX(-50%)した結果です。

試したこと

元サイトのソースコードは出来る限り確認し、再現してみました。
元サイトの .sub-nav-list に クラス active anima を付与するとアニメーションを再現できます。
そのようにして、出来る限りの属性を模写しました。
それ以外にも、色々な属性[perspective, rotateZ, width] いずれを試しても、上手くいきませんでした。

補足情報

簡単ですが、再現してみました。こちらを「台形あるいは遠近を意識した形」に出来れば良いのですが。
https://jsfiddle.net/ghost7492/k19cvbpL/4/

Answer 1

元サイトのコードを見ましたが、

	header {
		perspective: 1000px;
	}

となっていましたので、祖先要素に同様のスタイルをつけてみてはいかがでしょう？

Comments

[fjaiofjawiefjaw]

誠にありがとうございます。
自分の確認漏れです。親要素までしっかり見るべきでした。
しかし、よく短時間で発見できますね。流石でございます。
どうもありがとうございました。