1233 親の組合せで変化をつける 親の基本的な性質 要素 ( ボックス ) を親子にすることによって トランジションやアニメーションの動きにさまざまな変化をつけることができます 基本的には次のような性質を持っています 1 の position プロパティの値が static( または position の指定なし ) 以外の場合 の position プロパティの値に absolute を指定すると の左上端の位置を基準にしてを重ねて配置できます 2 の position プロパティの値が static( または position の指定なし ) 以外の場合で の position プロパティの値も static( または position の指定なし ) 以外の場合は はの座標系を基準にして変化します 例えば に transition で transform プロパティの scale 関数を scale(2, 2); と指定すると の幅と高さが2 倍に拡大される ( 見た目は2 倍になるということ ) と同時に その要素の座標系も2 倍に拡大されます (1px が見た目は2 倍になるということ ) その時にがあれば の幅と高さも( 見た目は )2 倍に拡大され もしが top, left の指定や translate の指定によって移動する場合には ( 見た目は ) 2 倍の距離を移動することになります 例えば translatex(120px); と指定してあれば 240px 移動するように見えます ( 見た目は 200px) scale(2, 2); ( 見た目は 200px) scale(2, 2); translatex(120px); 120px ( 見た目は 240px) ( 移動前 ) ( 移動後 ) 1
また 例えばに transform プロパティで rotatez(30deg); と指定すると そのが時計回りに30 度回転しますが その要素の座標系も30 度回転します その時にがあれば も30 度回転し もしが top, left の指定や translate の指定によって移動する場合には 30 度傾いた方向へ移動することになります rotatez(30deg); ( X ) ( Y ) ( Y ) ( X ) rotatez(30deg); translatex(120px); ( 見た目は 240px) 120px ( X ) ( Y ) ( 移動前 ) ( Y ) ( X ) ( 移動後 ) 2
親を組み合わせたサンプル 1. 傾斜したからの水平移動及び変形 1 (ParentAndChild-01.html/ParentAndChild-01.css) 30 度時計回りに傾斜したから が X 方向へ 300px 移動 60 度回転 及び 2 倍に拡大します transform: translatex(300px) rotatez(60deg) scale(2, 2); -webkit-transform: translatex(300px) rotatez(60deg) scale(2, 2); 2. 傾斜したからの水平移動及び変形 2 (ParentAndChild-02.html/ParentAndChild-02.css) 30 度時計回りに傾斜したから が border の幅拡大 円形に変形 magenta に変色 X 方向へ 300px 移動及び 2 倍に拡大します border: solid 20px cyan; border-radius: 140px; /* 早めに円形に変形させるために 70px ではなく 140px にしている */ background-color: magenta; transform: translatex(300px) scale(2, 2); -webkit-transform: translatex(300px) scale(2, 2); 3
3-1. の螺旋移動 (ParentAndChild-03A.html/ParentAndChild-03A.css) の大きさが 1.5 倍に拡大すると同時に が時計回りに 360 度回転し ながら X 軸方向へ 150px 移動及び円形に変形します この時 は rotatez translatex の順に指定しているので 回転する座標 系の上で X 方向へ移動するため 螺旋を描くことになります ( 黄色 ) と ( ピンク色 ) は translatex の値が正負逆なので それぞれ反対方向へ移 動します また が 1.5 倍に拡大するので 座標系も 1.5 倍に拡大され の大 きさと移動距離も 1.5 倍になります transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); ( 黄色 ) border-radius: ; transform: rotatez(360deg) translatex(150px); -webkit-transform: rotatez(360deg) translatex(150px); ( ピンク色 ) border-radius: ; transform: rotatez(360deg) translatex(-150px); -webkit-transform: rotatez(360deg) translatex(-150px); 3-2. の影響によるの螺旋移動 (ParentAndChild-03B.html/ParentAndChild-03B.css) が時計回りに 360 度回転しながら 1.5 倍に拡大すると同時に が X 軸方向へ 150px 移動します この時 の回転する座標系の上でが X 方向へ移動するため 螺旋を 描くことになります ( 黄色 ) と ( ピンク色 ) は translatex の値 の正負が逆なので それぞれ反対方向へ移動します また が 1.5 倍に拡大するので 座標系も 1.5 倍に拡大され の大 きさと移動距離も 1.5 倍になります 4
transform: scale(1.5, 1.5) rotatez(360deg); -webkit-transform: scale(1.5, 1.5) rotatez(360deg); ( 黄色 ) border-radius: ; transform: translatex(150px); -webkit-transform: translatex(150px); ( ピンク色 ) border-radius: ; transform: translatex(-150px); -webkit-transform: translatex(-150px); 4. の変化をに与えたくない場合 (ParentAndChild-04.html/ParentAndChild-04.css) が時計回りに 360 度回転しながら 1.5 倍に拡大するときに は回転 せずに X 軸方向へ 150px 移動します この時 の回転と逆の回転をに与えているため と同時に回 転せず直線移動することになります ( 黄色 ) と ( ピンク色 ) は translatex の値の正負が逆なので それぞれ反対方向へ移動します また が 1.5 倍に拡大するので 座標系も 1.5 倍に拡大され の大 きさと移動距離も 1.5 倍になります transform: scale(1.5, 1.5) rotatez(360deg); -webkit-transform: scale(1.5, 1.5) rotatez(360deg); ( 黄色 ) border-radius: ; transform: rotatez(-360deg) translatex(150px); -webkit-transform: rotatez(-360deg) translatex(150px); ( ピンク色 ) border-radius: ; 5
transform: rotatez(-360deg) translatex(-150px); -webkit-transform: rotatez(-360deg) translatex(-150px); 5. との消滅 (ParentAndChild-05.html/ParentAndChild-05.css) が時計回りに 360 度回転しながら 0.2 倍に縮小すると同時に が X 軸方向へに向かって移動します この時は の回転する座標系の上で X 方向へ移動するため 螺旋を 描きながらへ近づいていきます また が 0.2 倍に縮小するので 座標系も 0.2 倍に縮小され の大 きさも 0.2 倍になり 最後はの opacity の値が 0 なので も も消滅します opacity: 0; transform: rotatez(360deg) scale(0.2, 0.2); -webkit-transform: rotatez(360deg) scale(0.2, 0.2); ( 黄色 ) border-radius: 0px; transform: translatex(-230px); -webkit-transform: translatex(-230px); ( ピンク色 ) border-radius: 0px; transform: translatex(230px); -webkit-transform: translatex(230px); 6
6. のスパイラル ( 螺旋を描きながらの直線移動 ) (ParentAndChild-06.html/ParentAndChild-06.css) が時計回りに 4320 度回転 (12 回転 ) しながら X 軸方向へ 270px 移動しま す ここでは少しテクニックが必要です と同じ位置にと同じ大きさの ボックスを 2 つ (<div id="wrap1"> と <div id="wrap2">) 配置します このとき とでボックスを挟むよう重ねて配置します この 2 つのボックスは border も background-color も指定しないので見えません 2 つのボックスの 1 つ (wrap2) を回転させることによりも回転し もう 1 つのボックス (wrap1) を X 軸方向へ移動することによりも移動します この 2 つの動作によりがスパイラルを描くことになります ボックス wrap1 transform: translatex(270px); -webkit-transform: translatex(270px); ボックス wrap2 transform: rotatez(4320deg); -webkit-transform: rotatez(4320deg); 2つのボックスに border を指定すると見えるようになり その動く様子を見ることができます ( 下図 ) 緑色のボックス(wrap1) が X 軸方向けの移動 赤色のボックス (wrap2 ) が回転をしています ( ParentAndChild-06B.html / ParentAndChild-06B.css) 7. 応用 1 カラーボールのダンス 7-A. カラーボールの展開 (ParentAndChild-07A.html/ParentAndChild-07A.css) 画面中央の四角形を hover すると カラーボールが螺旋を描きながら周囲に展開 されます 7
7-B. カラーボールの回転 (ParentAndChild-07B.html/ParentAndChild-07B.css) 画面中央の四角形を hover すると カラーボールが螺旋を描きながら周囲に展開 され 時計回りに 720 度回転 (2 回転 ) ます 7-C. カラーボールの複合回転 (ParentAndChild-07C.html/ParentAndChild-07C.css) 画面中央の四角形を hover すると カラーボールが螺旋を描きながら周囲に展開され 時計回りに 720 度回転 (2 回転 ) 及び Y 軸を中心として 360 度 (1 回転 ) します ( 注意 )7-B 7-C では hover の戻りが真逆の順番にはなりません transition プロパティの機能上 hover で変化を連続して行わせた場合には 変化の順番で戻ります もし 戻りが必要でなければ hover ではなく click で変化を開始するようにするとよいです 8. 応用 2 写真のメリーゴーラウンド (ParentAndChild-08.html/ParentAndChild-08.css) 画面中央の点を click すると 8 枚の写真が螺旋を描きながら周囲に展開され 8
時計回りに 720 度回転 (2 回転 ) します 重要 注意!: 本サンプルは IE(Internet Explorer) ブラウザでは正しく動作しない ようです (2015 年 10 月 3 日現在 IE11 で確認 ) 9. 応用 3 図形の変形 回転 9-A. 図形の変形 (ParentAndChild-09A.html/ParentAndChild-09A.css) 図形を hover すると 3 つの円形がそれぞれ違った変化をします 9-B. カラーホイールの回転 (ParentAndChild-09B.html/ParentAndChild-09B.css) カラーホイールを hover すると 外側が時計回り 内側が反時計回りに回転しま す 9