teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

文章修正

2019/05/01 05:22

投稿

fjaiofjawiefjaw
fjaiofjawiefjaw

スコア210

title CHANGED
File without changes
body CHANGED
@@ -12,7 +12,9 @@
12
12
 
13
13
  ### 試したこと
14
14
  元サイトのソースコードは出来る限り確認し、再現してみました。
15
+ 元サイトの `.sub-nav-list` に クラス `active anima` を付与するとアニメーションを再現できます。
16
+ そのようにして、出来る限りの属性を模写しました。
15
- 色々な属性[perspective, rotateZ, width] いずれを試しても、上手くいきませんでした。
17
+ それ以外にも、色々な属性[perspective, rotateZ, width] いずれを試しても、上手くいきませんでした。
16
18
 
17
19
 
18
20
  ### 補足情報

1

文章改善

2019/05/01 05:22

投稿

fjaiofjawiefjaw
fjaiofjawiefjaw

スコア210

title CHANGED
@@ -1,1 +1,1 @@
1
- rotateXの見た目を思い通りにしたい
1
+ rotateXの見た目が遠近意識した形?にならな
body CHANGED
@@ -1,10 +1,21 @@
1
+ ### 前提・実現したいこと
2
+
1
- [こちら](https://www.recruit-lifestyle.co.jp/recruit/keiyaku/)のヘッダーナビの動き実装たいと思っております。
3
+ [こちら](https://www.recruit-lifestyle.co.jp/recruit/keiyaku/)のサイト模写しております。
2
- rotateXで回転させていることは、分かったのですが、
3
- 画像よう台形?のようになりせん
4
+ ヘッダーナビhover時動きつきして
5
+ 上から「パタンッ」ともう一つのナビリストが降りてくるアニメーションがあるかと思います。
6
+
7
+ アニメーション自体は作れます。
8
+ しかしながら、画像のように回転時の形が「台形あるいは遠近を意識した形」が再現できません。
4
- ※画像はrotateX(-50%)し結果です。
9
+ **何故このようにならないのかその理由と解決策を知りです。**
5
10
  ![ナビの回転画像](8805689b84b04503b07a8af72b8895f0.png)
11
+ ※画像は、cssをいじって、rotateX(-50%)した結果です。
6
12
 
13
+ ### 試したこと
7
- 自分方でも回転させてみたのですが、どうも台形になりせん
14
+ 元サイトソースコードは出来る限り確認し、再現してみました
8
- https://jsfiddle.net/ghost7492/k19cvbpL/4/
15
+ 色々な属性[perspective, rotateZ, width] いずれを試しても、上手くいきませんでした。
9
16
 
17
+
10
- よろしくお願いします。
18
+ ### 補足情報
19
+
20
+ 簡単ですが、再現してみました。こちらを「台形あるいは遠近を意識した形」に出来れば良いのですが。
21
+ https://jsfiddle.net/ghost7492/k19cvbpL/4/