質問: ### 前提・実現したいこと こちらのサイトを模写しております。 ヘッダーナビhover時の動きにつきまして。 上から「パタンッ」ともう一つのナビリストが降りてくるアニメーションがあるかと思います。 アニメーション自体は作れます。 しかしながら、画像のように回転時の形が「台形あるいは遠近を意識した形」が再現できません。 **何故このようにならないのか、その理由と解決策を知りたいです。** ![ナビの回転画像](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/8805689b84b04503b07a8af72b8895f0.png) ※画像は、cssをいじって、rotateX(-50%)した結果です。 ### 試したこと 元サイトのソースコードは出来る限り確認し、再現してみました。 元サイトの `.sub-nav-list` に クラス `active anima` を付与するとアニメーションを再現できます。 そのようにして、出来る限りの属性を模写しました。 それ以外にも、色々な属性[perspective, rotateZ, width] いずれを試しても、上手くいきませんでした。 ### 補足情報 簡単ですが、再現してみました。こちらを「台形あるいは遠近を意識した形」に出来れば良いのですが。 https://jsfiddle.net/ghost7492/k19cvbpL/4/
回答: 元サイトのコードを見ましたが、 ``` header { perspective: 1000px; } ``` となっていましたので、祖先要素に同様のスタイルをつけてみてはいかがでしょう?