1222-A Transform Function Order　（ｔｒｓｎ

Size: px

Start display at page:

Download "1222-A Transform Function Order　（ｔｒｓｎ"

ゆきいのら
5 years ago
Views:

1 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

2 また例えばに 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

rotatez(60deg) scale(2, 2); 2. 傾斜したからの水平移動及び変形 2 (ParentAndChild-02.html/ParentAndChild-02.

3 親を組み合わせたサンプル 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

4 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

5 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.

2 倍になり最後はの opacity の値が 0 なのでもも消滅します opacity: 0; transform: rotatez(360deg) scale(0.2, 0.

6 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

7 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

css) 画面中央の四角形を hover するとカラーボールが螺旋を描きながら周囲に展開され時計回りに 720 度回転 (2 回転 ) 及び Y 軸を中心として 360 度 (1 回転 ) します ( 注意 )7-B 7-C では hover

8 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

9 時計回りに 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

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover するとカラーホイールが回転しながら斜めに傾いていきます動きの仕組みこのトランジションは次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

1222-A Transform Function Order （ｔｒｓｎ

1222-A Transform Function Order　（ｔｒｓｎ