回答編集履歴
2
内容を追記
answer
CHANGED
|
@@ -3,12 +3,16 @@
|
|
|
3
3
|
|
|
4
4
|
+++++++++++++++++++++++++++++++++
|
|
5
5
|
|
|
6
|
-
3Dの回転を作る場合
|
|
6
|
+
3Dの回転を作る場合、
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
▼ 立体各面の配置方法によって多少変わりますが基本的に
|
|
9
9
|
|
|
10
|
+
1. 子要素に「rotateX」と「translateY」「translateX」を使って四角の立体を作る
|
|
11
|
+
|
|
10
12
|
2. 親要素が回転軸になるように、子要素にtranslateZをかけ、立体の中央を親要素(平面)が横切るようにする
|
|
11
13
|
|
|
14
|
+
▼ 立体と回転軸が出来てから
|
|
15
|
+
|
|
12
16
|
3. 親要素にアニメーション設定 ( 回転させるのは親要素だけです^^ )
|
|
13
17
|
|
|
14
18
|
4. 希望のタイミングで回転するようキーフレームを設定
|
1
書式の改善
answer
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
(位置設定までは親が大きい方が分かりやすいので違っていてもOKですが、
|
|
22
22
|
サイズが違うと回転軸がずれるのでアニメを実装する段階で統一させます)
|
|
23
23
|
|
|
24
|
-
● キーフレームはcubic-bezierを使わなくても、animation-play-state の pausedとrunningを組み合わせれば表現可能
|
|
24
|
+
● キーフレームはcubic-bezierを使わなくても、animation-play-state の pausedとrunningを組み合わせれば1面づつ止める表現も可能
|
|
25
25
|
|
|
26
26
|
+++++++++++++++++++++++++++++++++
|
|
27
27
|
|