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

(1)

1225-8 練習８ Translate Balls（translateX, translateY, translate）

transform プロパティの translate 関数を使用して２つのボールを斜めに転がすトランジションを作ってみましょう。 “Hover”ボタンの上をマウスポインター（カーソル）で hover すると、２つのボールが斜めに転がります。〔動きの仕組み〕このトランジションは、次の２つの動きの組み合わせで動きます。 ① ボールの横方向・縦方向の動き・・・transform プロパティで translate 関数を指定し、ease-in-out で動かすことにより、最初はゆっくりと、そして徐々に速度を増して動き、また徐々に速度を落とし、最後はゆっくりと止まります。

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

■

transform: translateX( )、translateY( )、translate( )

・要素の表示位置を移動するときに指定します。

(2)

© 2016 電脳 Papa 2 transform: translateX(X 方向の移動距離) transform: translateY(Y 方向の移動距離) transform: translate(X 方向の移動距離, Ｙ方向の移動距離) ・ transform: translate 関数は、移動する位置ではなく、移動する距離を指定します。・移動距離は数値＋単位（px 等）で指定し、数値は正の整数と負の整数が指定できます。〔指定例〕 transform: translateX(120px); transform: translate(30px, -80px); 【重要】注意！：本サンプルではボールの横方向と縦方向の動きに translate 関数を使用していますが、IE（Internet Explorer）ブラウザは translate 関数に不具合があります（2015

年 10 月 3 日現在、IE11 で確認）。次のような現象が発生するので注意してください。 ◎translate(Ｘ方向の移動距離, Ｙ方向の移動距離)のＹ方向の移動距離の後にスペース（半角スペース）を入れると動作しません（translate 関数だけでなく transform プロパティに一緒に指定した他の関数も動作しなくなります）。関数の括弧の中の前後にスペースを入れる書き方に慣れている方は注意してください。 ① translate( -480px, -80px ) ・・・動作しない。 ② translate(-480px, -80px ) ・・・動作しない。 ③ translate( -480px, -80px) ・・・動作する。 ④ translate(-480px, -80px) ・・・動作する。

※Google Chrome、Firefox、Safari、Microsoft Edge は、どの記述方法でも正常に動作します。しかし、こんなことに頭を使うのは無駄なことなので、translate 関数を指定する際には④のように括弧の中の前後にスペースを入れないで指定するようにしましょう。【TranslateBalls の説明】〔HTML の記述（TranslateBalls.html）〕 id 属性 stage の div 要素（トランジションが動くステージ）を作り、その中にボックスや画像を記述します。

id 属性 button の div 要素を作ります。これがボタン（親ボックス）になります。font1 ク

ラスでフォントを指定し、“Hover”を記述します。

id 属性 ball1 の div 要素（子ボックス）の中に<img>タグで画像要素の記述をします。画像

(3)

は"images/ ColorWheel.png"を指定します。

id 属性 ball2 の div 要素（子ボックス）の中に<img>タグで画像要素の記述をします。画像は"images/SoccerBall.png"を指定します。

hover でトランジションが開始されるようにするので、各要素には onClick などの記述はしません。

〔CSS の記述（TranslateBalls.css）〕

先ず、トランジションが動く#stage の記述をします。

ボタンとなる#button ボックス（親ボックス）を記述します。position は absolute にします。角丸矩形のボタンにしたいので、border-radius プロパティでボックスの４隅の角丸の半径を 10px で指定します。

#stage {

width: 600px; height: 200px; background-color: forestgreen; border: solid 1px black; position: relative; } <!DOCTYPE html> <html> <head> <title>TranslateBalls</title> <meta charset="UTF-8">

<body>

<p>■ボタン（親ボックス）を hover して、複数のボール（子ボックス）を斜めに移動（Translate）させる。</p>

<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> #button { top: 80px; left: 240px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px;

(4)

画像（images/ ColorWheel.png）を入れる#ball1 ボックス（子ボックス）を記述します。 position は absolute にして、位置は top –70px と left –230px（#button ボックスの左上端を基準とした位置）で指定します。transition の記述をします。transform プロパティを 2 秒、ease-in-out でトランジションするように記述します。

画像（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; position: absolute;

transition: transform 2s ease-in-out;

-webkit-transition: -webkit-transform 2s ease-in-out; } #ball2 img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; } #ball1 { top: -70px; left: -230px; width: 100px; height: 100px; position: absolute;

transition: transform 2s ease-in-out;

-webkit-transition: -webkit-transform 2s ease-in-out; } #ball1 img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; } background-color: red; text-align: center; cursor: default; position: absolute; }

(5)

#button ボックス（ボタン）を hover したら、#button ボックスの背景色を deepskyblue に変化させます。

#button ボックス（ボタン）を hover した時の変化として、#ball1 ボックスに transform プロパティで translate(480px, 80px)、rotateZ(720deg) を指定しておいて、時計回りで２回転しながら、Ｘ軸方向へ 480px、Ｙ軸方向へ 80px 移動させます。

同じように、#button ボックス（ボタン）を hover した時の変化として、#ball2 ボックスに transform プロパティで translate(-480px, -80px) 、rotateZ(-720deg) を指定しておいて、反時計回りで２回転しながら、Ｘ軸方向へ-480px、Ｙ軸方向へ-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 "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 50px;

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

transform: translateX( )、translateY( )、translate( )

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