transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は移動する位置ではなく移動

Size: px

Start display at page:

Download "transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は移動する位置ではなく移動"

としはるかたづ
7 years ago
Views:

1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジションを作ってみましょう Hover

関数を指定し ease-in-out で動かすことにより最初はゆっくりとそして徐々に速度を増して動きまた徐々に速度を落とし最後はゆっくりと止まります 2 ボールの回転 transform プロパティで rotatez 関数を指定し ease-in-out

1 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜めに転がります動きの仕組みこのトランジションは次の2つの動きの組み合わせで動きます 1 ボールの横方向縦方向の動き transform プロパティで translate 関数を指定し ease-in-out で動かすことにより最初はゆっくりとそして徐々に速度を増して動きまた徐々に速度を落とし最後はゆっくりと止まります 2 ボールの回転 transform プロパティで rotatez 関数を指定し ease-in-out で動かすことにより最初はゆっくりとそして徐々に回転速度を増して動きまた徐々に回転速度を落とし最後はゆっくりと止まりますプロパティ transform: translatex( ) translatey( ) translate( ) 要素の表示位置を移動するときに指定します 1

2 transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は移動する位置ではなく移動する距離を指定します移動距離は数値 + 単位 (px 等 ) で指定し数値は正の整数と負の整数が指定できます指定例 transform: translatex(120px); transform: translate(30px, -80px); 重要注意!: 本サンプルではボールの横方向と縦方向の動きに translate 関数を使用していますが IE(Internet Explorer) ブラウザは translate 関数に不具合があります (2015 年 10 月 3 日現在 IE11 で確認 ) 次のような現象が発生するので注意してください translate(x 方向の移動距離, Y 方向の移動距離 ) のY 方向の移動距離の後にスペース ( 半角スペース ) を入れると動作しません (translate 関数だけでなく transform プロパティに一緒に指定した他の関数も動作しなくなります ) 関数の括弧の中の前後にスペースを入れる書き方に慣れている方は注意してください 1 translate( -480px, -80px ) 動作しない 2 translate(-480px, -80px ) 動作しない 3 translate( -480px, -80px) 動作する 4 translate(-480px, -80px) 動作する Google Chrome Firefox Safari Microsoft Edge はどの記述方法でも正常に動作しますしかしこんなことに頭を使うのは無駄なことなので translate 関数を指定する際には4のように括弧の中の前後にスペースを入れないで指定するようにしましょうサンプル CSS TranslateBalls の説明 HTML の記述 (TranslateBalls.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作りその中にボックスや画像を記述します id 属性 button の div 要素を作りますこれがボタン ( 親ボックス ) になります font1 クラスでフォントを指定し Hover を記述します id 属性 ball1 の div 要素 ( 子ボックス ) の中に <img> タグで画像要素の記述をします画像 2

3 は "images/ ColorWheel.png" を指定します id 属性 ball2 の div 要素 ( 子ボックス ) の中に <img> タグで画像要素の記述をします画像は "images/soccerball.png" を指定します hover でトランジションが開始されるようにするので各要素には onclick などの記述はしません <!DOCTYPE html> <html> <head> <title>translateballs</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="translateballs.css"> </head> <body> <p> ボタン ( 親ボックス ) を hover して複数のボール ( 子ボックス ) を斜めに移動 (Translate) させる </p> <div id="stage"> <div id="button"><font class="font1">hover</font> <div id="ball1"><img src="images/colorwheel.png" alt="color Wheel"></div> <div id="ball2"><img src="images/soccerball.png" alt="soccer Ball"></div> </div> </div> </body> </html> CSS の記述 (TranslateBalls.css) 先ずトランジションが動く #stage の記述をします #stage { width: 600px; height: 200px; background-color: forestgreen; border: solid 1px black; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にします角丸矩形のボタンにしたいので border-radius プロパティでボックスの 4 隅の角丸の半径を 10px で指定します #button { top: 80px; left: 240px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; 3

4 background-color: red; text-align: center; cursor: default; 画像 (images/ ColorWheel.png) を入れる #ball1 ボックス ( 子ボックス ) を記述します position は absolute にして位置は top 70px と left 230px(#button ボックスの左上端を基準とした位置 ) で指定します transition の記述をします transform プロパティを 2 秒 ease-in-out でトランジションするように記述します #ball1 { top: -70px; left: -230px; width: 100px; height: 100px; transition: transform 2s ease-in-out; -webkit-transition: -webkit-transform 2s ease-in-out; #ball1 img { top: 0px; left: 0px; width: 100%; height: 100%; 画像 (images/ SoccerBall.png) を入れる #ball2 ボックス ( 子ボックス ) を記述します position は absolute にして位置は top 10px と left 250px(#button ボックスの左上端を基準とした位置 ) で指定します transition の記述をします transform プロパティを 2 秒 ease-in-out でトランジションするように記述します #ball2 { top: 10px; left: 250px; width: 100px; height: 100px; transition: transform 2s ease-in-out; -webkit-transition: -webkit-transform 2s ease-in-out; #ball2 img { top: 0px; left: 0px; width: 100%; height: 100%; 4

5 #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を deepskyblue に変化させます #button ボックス ( ボタン ) を hover した時の変化として #ball1 ボックスに transform プロパティで translate(480px, 80px) rotatez(720deg) を指定しておいて時計回りで 2 回転しながら X 軸方向へ 480px Y 軸方向へ 80px 移動させます同じように #button ボックス ( ボタン ) を hover した時の変化として #ball2 ボックスに transform プロパティで translate(-480px, -80px) rotatez(-720deg) を指定しておいて反時計回りで2 回転しながら X 軸方向へ-480px Y 軸方向へ-80px 移動させます注意!!===================================================================== transform プロパティに複数の関数 ( 例えば translate と rotatez) を指定する場合には各関数の間にスペースを入れて記述します transform: translate(480px, 80px) rotatez(720deg); -webkit-transform: translate(480px, 80px) rotatez(720deg); 各関数の間に下記のように, ( カンマ ) を入れると transform プロパティが実行されない ( 適用されない ) ので注意が必要です transform: translate(480px, 80px), rotatez(720deg); -webkit-transform: translate(480px, 80px), rotatez(720deg); ============================================================================= #button:hover { background-color: deepskyblue; #button:hover div#ball1 { transform: translate(480px, 80px) rotatez(720deg); -webkit-transform: translate(480px, 80px) rotatez(720deg); #button:hover div#ball2 { transform: translate(-480px, -80px) rotatez(-720deg); -webkit-transform: translate(-480px, -80px) rotatez(-720deg); 最後にボタンに表示するテキストのフォントの指定をします.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 50px; 5

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を玉の画像に ball という id を付けておきます <!DOCT

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を玉の画像に ball という id を付けておきます <!DOCT 1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は移動する位置ではなく移動