1222-A Transform Function Order　（ｔｒｓｎ

(1)

© 2016 電脳 Papa 1 1256 Reflect プロパティ (-webkit-box-reflect) -webkit-box-reflect プロパティを使用して反射画像を作ってみましょう。 webkit の仕様なので Safari、Chrome で適用されますが、それ以外のブラウザは未対応です（2015 年 11 月 25 日現在）。 -webkit-box-reflect プロパティは、画像が鏡に映って反転（反射画像）しているような状態を作ることができます。例えば写真やイラストの画像を hover したときに反射画像を表示したり、ビデオ画像に反射画像を付けることもできます。写真やイラストの画像やビデオ画像のサイズをトランジションやアニメーションで変えると、それに合わせて反射画像も自動的にサイズが変わります。反射画像は、周りの要素に影響を与えないので、周りの要素の位置がずれたりしません。 box-shadow プロパティと同じように、周りに覆いかぶさるように描かれます。 ■

-webkit-box-reflect

クリッピング領域は要素のボーダーボックスのどの部分を見えるようにするかを決定します。値説　　　　　明反射の方向 above(上）、below（下）、left（左）、right（右）反射画像に適用するマスク数値＋単位で指定。正の値は隙間が空き、負の値は元の画像と反射画像が重なる。指定なしは初期値（0px）と同様。元の画像と反射画像の隙間の距離 URI（URL）で画像ファイルまたはグラデーションを指定。「元の画像と反射画像の隙間の距離」と「反射画像に適用するマスク」は指定がなくても構いません。反射画像は要素と同じサイズで描かれ、要素のボーダーやパディングも含まれます。 border-radius プロパティで要素の角が丸く指定されていれば、反射画像の角も丸く描かプロパティ

(2)

© 2016 電脳 Papa 2 れます。マスクは反射画像を部分的に透明色や不透明色で描きます。マスク画像ファイルは PNG、 SVG、GIF が指定でき、透明色の領域を含む画像を指定します。マスクのアルファ値がピクセル単位で反射画像に適用されます。色は何色でもアルファ値だけが反射画像に影響します。マスクですから、マスクの透明な部分は元の画像は表示されず、マスクの色のある部分は元の画像が抜き出されて表示されます。マスク画像を作るときには、反射画像ではなく元の要素に掛けるマスク画像を作ります。元の要素にはマスクは掛かりませんが、反射画像はマスクの掛かった要素の反射画像として描かれます。マスクにグラデーションを指定する場合は、例えば top が透明で bottom が不透明のグラデーションで指定されると、反射画像にはその逆のグラデーションが描かれます。〔内部反射画像〕反射画像には元の要素の子孫の要素がすべて描かれます。もし元の親要素に -webkit-box-reflect を指定して、さらにその子要素にも-webkit-box-reflect を指定すると、最初に子要素の反射画像が描かれます。この子要素の元の画像と反射画像は、親要素の反射画像の中に描かれます。（※サンプルＣＳＳ１の５番目の画像を参照してください。） ●反射画像を作る（静止画像）【Reflection の説明】〔HTML の記述（Reflection.html）〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 textReflect1 の div 要素を記述し、中にテキストで「このテキストの写像は接しています。」と記述します。

id 属性 textReflect2 の div 要素を記述し、中にテキストで「このテキストの写像は接しています。」と記述します。

id 属性 simpleReflect の img 要素を記述し、画像ファイル src="images/DSC00149M.jpg"を記述します。

id 属性 maskReflect の img 要素を記述し、画像ファイル src="images/DSC00203M.jpg"を記述します。

id 属性 innerReflect の div 要素を記述し、子要素として img 要素で画像ファイル

(3)

© 2016 電脳 Papa 3 src="images/DSC00092M.jpg"を、span 要素でテキスト「inner Reflection」および br 要素、さらにもう一つ span 要素でテキスト「inner Reflection」および br 要素を記述します。 は半角スペースになります。〔CSS の記述（Reflection.css）〕先ず、ボックスを描画するための#stage の記述をします。次に各種の反射画像を記述をします。〔テキストの反射画像１〕 #stage { width: 750px; height: 550px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; } <!DOCTYPE html> <html> <head> <title>Reflection</title> <meta charset="UTF-8">

<img id="maskReflect" src="images/DSC00203M.jpg"> <div id="innerReflect"> <img src="images/DSC00092M.jpg"> <span>inner Reflection</span><br> <span>inner Reflection</span><br></div> </div> </body> </html>

(4)

© 2016 電脳 Papa 4 -webkit-box-reflect: below;と指定しているので、元のテキストの下に反射テキストが描かれます。「元の画像と反射画像の隙間の距離」の指定がないので、元のテキストと反射テキストは接していますが、テキストの場合は、文字の高さ（font-size）よりも行の高さ（line-height）が少し大きいので、見た目には少し隙間が空きます。見た目にもぴったりと接するようにしたい場合は、「元の画像と反射画像の隙間の距離」にマイナスの値を指定します。〔テキストの反射画像２〕ここでは-webkit-box-reflect: below 10px と指定されていて、「元の画像と反射画像の隙間の距離」に 10px の指定があるので、元のテキストと反射テキストは離れています。マスクに-webkit-linear-gradient(top, transparent, white)とグラデーションの指定をしているので、反射テキストは元のテキストにグラデーションのマスクが掛かった状態で下方向に逆向きの状態で描かれます。 #textReflect1 { position: absolute; top: 20px; left: 20px; background-color: skyblue; text-align: center;

font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: red; -webkit-box-reflect: below; } #textReflect2 { position: absolute; top: 100px; left: 20px; background-color: lightgreen; text-align: center;

font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: blue;

-webkit-box-reflect: below 10px -webkit-linear-gradient(top, transparent, white); }

(5)

transparent, transparent 50%, white);とグラデーションの指定をしているので、反射画像は元の画像の top から transparent 50%までの部分が表示されず、 transparent 50%から white の部分が徐々に見えてくるようなグラデーションのマスクが掛かった状態で、下方向に逆向きの状態で描かれます。〔画像にマスクを掛けた反射画像〕元の画像マスク画像反射画像

ここでは-webkit-box-reflect: below 5px url(images/ReflectMask1.png);とマスクに画像ファイル images/ReflectMask1.png を指定をしているので、反射画像は元の画像にマス #simpleReflect { position: absolute; top: 190px; left: 20px; width: 224px; height: 168px; border-radius: 20px;

-webkit-box-reflect: below 0px -webkit-linear-gradient(top, transparent, transparent 50%, white);

(6)

© 2016 電脳 Papa 6 クが掛かった状態で下方向に逆向きの状態で描かれます。（注：マスク画像の空白の部分は透明です。）〔画像と反射画像全体の反射画像（内部反射画像）〕ここでは親要素の#innerReflect に-webkit-box-reflect : below 20px;と指定しているので、子要素の img 要素の画像と span 要素のテキストが反射画像になります。さらに子要素の img 要素に-webkit-box-reflect: below 0px -webkit-linear-gradient(top, transparent, transparent 80%, white);と指定しているので、子要素の img 要素の画像の反射画像も描かれます。その結果、左のように反射画像の内部にさらに反射画像が描かれている画像になります。 #maskReflect { position: absolute; top: 190px; left: 260px; width: 224px; height: 168px;

-webkit-box-reflect: below 5px url(images/ReflectMask1.png); } #innerReflect { position: absolute; top: 190px; left: 500px; -webkit-box-reflect: below 20px; } #innerReflect img { width: 224px; height: 120px; border-radius: 20px;

}

#innerReflect span {

font: bold 18px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: red;

(7)

© 2016 電脳 Papa 7 反射画像が変形するトランジションを作ってみましょう。ボタンを hover すると、３つの反射画像がそれぞれ違った変形をしながらトランジションします。【ReflectTransition の説明】〔HTML の記述（ReflectTransition.html）〕 id 属性 stage の div 要素（トランジションが動くステージ）を作り、その中にボックスや画像を記述します。 id 属性 button の div 要素を作ります。これがボタン（親ボックス）になります。 font28GothicB クラスでフォントを指定し、“Hover”を記述します。

id 属性 image1 の img 要素を記述し、画像ファイル src="images/DSC00203M.jpg"を記述します。

id 属性 image2 の div 要素を記述し、子要素として画像ファイル src="images/ DummyTrans1X1.png"と span 要素の中にテキスト「ABC」を記述します。

id 属性 image3 の div 要素を記述し、子要素として span 要素でテキスト「Reflection」を２つ、さらにもう一つ span 要素のタグのみを記述します。

（注：#image2 要素には、直接テキスト「ABC」を記載して span 要素を使わないのが一般的な指定方法ですが、そうすると Safari が反射画像を表示できないようなので、子要素の span 要素の中にテキストを記述しています。Chrome は#image2 要素に直接テキストを記述しても問題ありません。また、#image2 要素にダミーで透明な画像を指定しているのは、Safari が span 要素だけでは初期画面で反射画像が表示されず、動き出すと反射画像が表示されるという現象があるので、いろいろと試してみた結果、画像が含まれていると初期画面で反射画像が表示されたので、ダミーで透明な画像を指定しています。Chrome は画像がなくても反射画像が表示されます。〔2015 年 11 月 25 日現在〕）サンプルＣＳＳ２

(8)

© 2016 電脳 Papa 8 〔CSS の記述（ReflectTransition.css）〕先ず、トランジションが動く#stage の記述をします。ボタンとなる#button ボックスを記述します。 #button { top: 20px; left: 297px; width: 100px; height: 50px; border: solid 3px #666666; text-align: center; color: #666666; line-height: 55px; cursor: default; position: absolute; border-radius: 10px; } #stage { width: 700px; height: 550px; background-color: #000000; position: relative; overflow: hidden; } <!DOCTYPE html> <html> <head> <title>ReflectTransition</title> <meta charset="UTF-8">

<body>

<p>■写像を動かす。</p> <div id="stage">

<div id="button"><font class="font28GothicB">Hover</font> <img id="image1" src="images/DSC00203M.jpg" alt="green road"> <div id="image2"><img src="images/DummyTrans1X1.png" alt="dummy"> <span>ABC</span></div> <div id="image3"><span>Reflection</span><span>Reflection</span> <span></span></div> </div> </div> </body> </html>

(9)

ボタンに表示するテキストのフォントを指定します。

#button ボックス（ボタン）を hover したら、#button ボックスの背景色を background-color: #555555;（灰色）に、”Hover”の文字を color: #000000;（黒色）変化させます。

次に各トランジションの記述をします。

〔反射画像を回転移動させるトランジション〕反射画像を回転移動させてみましょう。

#image1 ボックスは反射画像を右から左へ回転しながら移動するようにしました。

#image1 ボックスを記述します。position は absolute にして、位置は top: 70px; left: 180px;（#button ボックスの左上端を基準とした位置）で指定します。 border-radius: 20px; を指定して４隅を丸くします。 position は absolute で指定します。 -webkit-box-reflect プロパティで反射画像を作り、画像の下半分だけ見えて上へいくにつれて見えなくなるようにグラデーションを指定します。

transition の記述をします。3 秒で linear で ease-in-out で変化するように記述します。 #button ボックス（ボタン）を hover した時の変化として、#image1 要素に left: -280px; へ移動、反時計回りに 360 度回転になるように指定します。 #button:hover { background-color: #555555; color: #000000; } .font28GothicB {

font: bold 28px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; }

(10)

#image2 ボックスを記述します。位置は top: 290px; left: -290px;（#button ボックスの左上端を基準とした位置）で指定します。 position は absolute で指定します。

-webkit-box-reflect: below 2px -webkit-linear-gradient(top, transparent, transparent 20%, white);を指定し、子要素の img 要素と span 要素を含めて反射画像を描きます。image2 ボックスの右端を軸にして横回転させるので、-webkit-transform-origin: right center; で指定します。最初の画像は少し回転した状態にしたいので、 -webkit-transform: perspective(500px) rotateY(60deg);と指定し、画像の右端を軸として６０度回転させます。transition の記述をします。3 秒で ease-in-out で変化するように記述します。 #image1 { position: absolute; top: 70px; left: 180px; width: 196px; height: 147px; border-radius: 20px;

-webkit-box-reflect: below 2px -webkit-linear-gradient(top, transparent, transparent 60%, white); -webkit-transition: 3s ease-in-out; } #button:hover #image1 { left: -280px; -webkit-transform: rotateZ(-360deg); }

(11)

子要素の img 要素でダミーの透明画像を指定します。

子要素の span 要素にはテキストのフォントやスタイルの指定をします。

#button ボックス（ボタン）を hover した時の変化として、#image2 要素に Y 軸の正の方向から見て計回りに 330 度回転になるように指定します。 #image2 { position: absolute; top: 290px; left: -290px; width: 180px; height: 80px;

-webkit-perspective-origin: 50% 50%;

-webkit-transform-origin: right center;

-webkit-transform: perspective(500px) rotateY(60deg); -webkit-transition: 3s ease-in-out; } #image2 span { position: absolute; top: 0px; left: 0px; width: 180px; height: 80px; text-align: center;

font: bold 82px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 80px; background-color: skyblue; color: red; text-decoration: underline; -webkit-text-fill-color: red; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: orange; } #image2 img { top: 0px; left: 0px; width: 150px; height: 80px; position: absolute; /* 注：Safari は span 要素だけでは初期画面で反射画像が表示されません。画像が含まれていると表示されるので、ダミーで透明な画像を指定しています。Chrome はＯＫ。 */ }

(12)

© 2016 電脳 Papa 12 〔反射画像を傾斜・拡大させるトランジション〕ＣＳＳ３の仕様では、反射画像は元の画像と同じサイズで描かれるので、反射画像を傾斜・拡大することはできません。しかし、そういうトランジションを作ってみたいのは私だけではないと思うので、反射画像を使わない別の方法でそのように見えるトランジションを作ってみます。元のテキストが上方へ遠ざかるにつれて、傾斜して映っている反射テキストが拡大し、色が薄くなります。

#image3 ボックスは子要素である３つの span 要素の基準ボックスとして位置 top: 350px; left: 130px; （#button ボックスの左上端を基準とした位置）とサイズ width: 280px; height: 50px;だけ指定します。position は absolute で指定します。

#image3 ボックスの１つ目の span 要素は、 ReflectTransition.html にテキスト「Reflection」が記述してあるので、フォントやスタイルの指定をします。（このテキストが元の画像に相当します。）transition の記述をします。3 秒で ease-in-out で変化するよ #image3 { position: absolute; top: 350px; left: 130px; width: 280px; height: 50px; } #button:hover #image2 {

-webkit-transform: perspective(500px) rotateY(330deg); }

(13)

#image3 ボックスの２つ目の span 要素も、 ReflectTransition.html にテキスト「Reflection」が記述してあるので、フォントやスタイルの指定をします。（このテキストが反射画像に相当します。）テキストに遠近感を持たせて傾けたいので、 -webkit-transform: perspective(500px) rotateX(60deg) scale(1.1, -2.5);と指定しています。scale(1.1, -2.5)の Y 方向の値-2.5 によってテキストが下向に拡大されます。X 方向の値に 1.1 を指定しているのは、元のテキストと反射テキストの接している部分の幅を合わせるためです。テキストの中心を軸にして６０度傾いているので、反射テキストの底辺部分の幅が元の幅より狭く描かれるため、X 方向へも拡大して合わせています。 transition の記述をします。3 秒で ease-in-out で変化するように記述します。 #image3 ボックスの３つ目の span 要素は、反射画像に相当するテキストにかけるグラデーションを指定します。background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 1));と指定しています。-webkit-box-reflect プロパティのマスクと違いグラデーションなので、グラデーションの透明な部分は２つ目の span 要素のテキストが見えて、グラデーションが上に行くにつれて黒色になっていくので、２つ目の span 要素のテキストが見えなくなります。２つ #image3 > span:nth-child(1) { position: absolute; top: 0px; left: 0px; width: 230px; height: 50px; text-align: left;

font: bold 48px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 66px; color: lightgray; -webkit-transition: 3s ease-in-out; } #image3 > span:nth-child(2) { position: absolute; top: 50px; left: 0px; width: 230px; height: 50px; text-align: left;

font: bold 48px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 60px;

color: lightgray;

-webkit-transform: perspective(500px) rotateX(60deg) scale(1.1, -2.5);

-webkit-transition: 3s ease-in-out; }

(14)

目の span 要素のテキストに合わせて遠近感を持たせて傾けたいので、-webkit-transform: perspective(500px) rotateX(60deg) scale(1.1, -2.5);と指定しています。transition の記述をします。3 秒で ease-in-out で変化するように記述します。

#button ボックス（ボタン）を hover した時の変化として、#image3 要素の各 span 要素に次のように指定します。

１つ目の span 要素は、top: -200px;と指定して上方へ移動させます。

２つ目の span 要素は、-webkit-transform: perspective(500px) rotateX(60deg) scale(1.5, -4.5);と指定し、６０度傾いたままでサイズを scale(1.5, -4.5)に徐々に拡大します。サイズが拡大されるとテキストの底部の方向へも伸びるので、徐々に top: 70px;に移動しテキストの底部の位置が元の位置からずれないようにします。opacity: 0.1;を指定して、テキストを徐々に見えないように変化させます。

３つ目の span 要素も、２つ目の soan 要素と同様に、 -webkit-transform: perspective(500px) rotateX(60deg) scale(1.5, -4.5);と指定し、６０度傾いたままでサイズを scale(1.5, -4.5)に徐々に拡大します。サイズが拡大されると span 要素の底部の方向へも伸びるので、徐々に top: 70px;に移動し元の位置からずれないようにします。

#button:hover #image3 > span:nth-child(1) { top: -200px;

}

#button:hover #image3 > span:nth-child(2) { top: 70px;

opacity: 0.1;

-webkit-transform: perspective(500px) rotateX(60deg) scale(1.5, -4.5); }

#button:hover #image3 > span:nth-child(3) { top: 70px;

-webkit-transform: perspective(500px) rotateX(60deg) scale(1.5, -4.5); }

#image3 > span:nth-child(3) { position: absolute;

top: 50px; left: 0px; width: 220px; height: 50px;

background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0),

rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 1));

-webkit-transform: perspective(500px) rotateX(60deg) scale(1.1, -2.5);

-webkit-transition: 3s ease-in-out; }

1222-A Transform Function Order （ｔｒｓｎ

-webkit-box-reflect

1222-A Transform Function Order　（ｔｒｓｎ