1225-8 練習 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
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
は "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
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
#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