freeCSS3のプロパティtransformやtransitionを用いると、要素をアニメーションさせたり変形することができます。Lopan.jp「動くCSSのためのメモ。」はさまざまな作例で、CSS3の効果を解説しています。それらを参考に、イメージとテキストが組合わったサンプルを3つつくりました。いずれも、マウスポインタを画像に重ねると、それを説明するテキストが表れます(サンプル001)。JavaScriptコードは書いていません。*デフォルトの画面は少し狭いので、フルスクリーンにすると全体が見えます。画像の上にテキストが広がる初めのサンプルは、画像にマウスポインタを重ねたら、テキストが真ん中から広がって表れるようにします。画面に置く画像とテキストの要素は、つぎのようにリストで組立てます。li要素にはclass属性(type1)を定めました。テキストはさらに説明リスト要素(dl要素)として加えています。info</a></dd></dl></li></ul>アニメーションなどの手を加える前に、以下のCSSで静的にテキスト(dl要素)をリストの画像と同じ大きさに定めました(図001)。行頭の番号は後にCSSの定めをまとめたコード001にもとづきます。#7a3f3a;}さて、テキストをリストの画像と重ねましょう(図002)。そのためには、以下のようにCSSでdl要素のpositionプロパティをabsoluteとし、topプロパティの値は0に定めます(第32〜33行目)。0;}要素の大きさを揃えるには、box-sizingプロパティを使うと便利です(「レスポンシブデザインに便利!今さらCSS3のbox-sizingについて話してみます」参照)[*1]。box-sizingプロパティにより、ボックスサイズを定めるwidthおよびheightプロパティに含める領域が選べます(表001)。ここではborder-boxとしました(第31行目)。親要素を継承いよいよ、画像にマウスポインタを重ねたら、テキストが真ん中から広がって表れるようにします。プロパティには、つぎのようにtransform-function(変換関数)を定めます(表002)。伸縮に用いるのは、scale()関数です。時計回りに引数の角度回す。引数の比率だけ水平および垂直に伸縮する。引数がひとつのときは、水平と垂直は同じ比率とされる。引数の値だけ水平および垂直に移動する。引数がひとつのときは、垂直の移動値は0とされる。アニメーションはtransitionプロパティで与えます。それぞれにデフォルト値が与えられていますので、アニメーションにかける時間だけ定めれば済む場合が多いでしょう。時間このお題では以下のCSSのように、dl要素(クラスtype1)に不透明度と変形のアニメーションを加えました(図003)。テキストのdl要素は、初めopacityプロパティが0で透明、transformプロパティではscale()関数で伸縮率が水平0.75で垂直0につぶされています(第58〜59行目)。transitionプロパティでアニメーションを0.5秒間にしました(第60行目)。マウスポインタを重ねると:hover疑似クラスの定めにより、テキストのdl要素は真ん中から広がりながら(伸縮率水平1・垂直1)透明から不透明(opacity値1)に変わってゆきます(第63〜64行目)。1);}ここまでのCSSの定めをまとめたのが、つぎのコード1です。画像の領域にマウスポインタを重ねると、その真ん中からテキストが広がり、透明度を増して表れます(前掲図003)。CSS3の機能は、ブラウザとそのバージョンによってはベンダー接頭辞を加えなければなりません。WebKit系なら-webkit-、Mozilla系は-moz-などです。free」を用いることにより、ベンダー接頭辞は省きました(図004)。背中合わせの画像とテキストを水平に回すつぎのサンプルは、画像の後ろにテキストを背中合わせに隠し、マウスポインタが重なったら水平に裏返してテキストを示します。HTMLのリストに加える画像とテキストの要素は、つぎのように前述01「画像のうえにテキストが広がる」と同じ組立てです。li要素には新たなclass属性(type2)を定めました。info</a></dd></dl></li></ul>要素をy軸で水平に回すには、transformプロパティにrotateY()関数で角度を与えます(表003)。transformプロパティを定めただけでは、水平に伸び縮みしているようにしか見えません(図005左)。以下のCSSのように、perspectiveプロパティで遠近感を与えなければならないのです(第68行目)。行番号は後にまとめて掲げるコード002にもとづきます。xyz各軸を中心に引数の角度回す。xyz各軸の方向に引数の比率伸縮する。xyz各軸の方向に引数の値移動する。図005■perspectiveプロパティで遠近感が加わるperspectiveプロパティに定める数値は、カメラのレンズの焦点距離に当たります。値が小さいほど、遠近の差が際立ちます(ニコンイメージング「遠近感(パースペクティブ)」参照)。transform-styleプロパティをpreserve-3dとして、3次元座標空間の扱いであることを示します(第69行目)。これで、遠近感の加わった3次元表現になりました(図005右)。rotateY(0);}3次元の表現でふたつのものが重なるときは、気をつけなければならないことがあります。どちらを手前にすればよいのか、さらにそれをどうやって決めるかです。ふたつの背中合わせの要素を水平に回したときは、90度ごとに前後が入れ替わります。回転角を考えなければならないとなると厄介です。実は、便利なプロパティがあります。backface-visibilityプロパティは要素が裏返ったとき、見せる(visible)か隠す(hidden)かを定めます。以下のCSSのようにbackface-visibilityプロパティにhiddenを与えれば、裏返った要素は見えなくなります(第74行目)。ふたつの要素が回ったとき、ひとつが裏返った瞬間に消え、表になったもうひとつが表れます。このお題のCSSは、以下のコード002にまとめました。画像の両外から幕が開閉するようにテキストの表示を切替える3つ目のサンプルは、ポインタを重ねると画像の左右から幕が閉じるようにしてテキストが表れ、外すと開いて消えます。HTMLのリストに加える画像とテキストの要素は、つぎのように前のふたつと同じ組立てです。li要素にはまた新たなclass属性(type3)を定めました。info</a></dd></dl></li></ul>画像の左右から閉じる幕は、疑似要素::beforeと::afterでつくります[*2]。これらの疑似要素は、選ばれた要素の子要素として前(::before)後(::after)に加えられます。かたちとして使いたい要素を定めるのに便利です。初めに幕は開いておきます(図006)。以下のCSSのように幕の幅は画像の半分、高さは同じに揃えます(第109〜110行目)。transformプロパティでは、skewX()関数で水平に傾けたうえ、translateX()関数を用いて画像の外側に開きます(第121および第124行目)。skewX(-30deg);}画像にマウスポインタを重ねたら幕が閉じ、その前にテキストが表れるようにします(図007)。CSSは以下のように:hover疑似クラスで、ふたつの疑似要素(::beforeと::after)の傾き(skewX()関数)をまっすぐに戻して、画像が覆われるように水平位置(translateX()関数)を定めます(第127および第130行目)。skewX(0);}もっとも、これだけではテキスト(要素dtとdd)がふたつの疑似要素の手前に出てきません。要素の重ね順はz-indexプロパティに整数値を与えて定めます。このときpositionプロパティは、デフォルトのstatic以外にしなければならないことに気をつけましょう(スタイルシートリファレンス「z-index」参照)。以下のCSSは、positionプロパティをrelativeとし、z-indexには整数1を与えました(第92〜93行目)。ひとつ、画像の外側に出た幕の疑似要素は隠しましょう。要素のoverflowプロパティをhiddenに定めると、外にはみ出したコンテンツは見えなくなります(第28行目)。1;}幕の開け閉めはできましたので、transitionプロパティで動きをアニメーションにします。以下のCSSは前述の幕の疑似要素の動きに加えて、テキストは透明から不透明に変えました(第94および第99行目)。幕も初めは透明にしておきます(第112行目)。このお題では、アニメーションを少し細かく変えてみました。transitionプロパティには、つぎの4つの値が与えられます。それぞれについて別に定められたプロパティで値を変えることもできます(表004)。アニメーションさせる対象のプロパティ。アニメーションにかける時間。値の変わり方を定めるタイミング関数。アニメーションを始めるまでに待つ時間。0s透明のテキスト(要素dtとdd)が表れるアニメーションには、transition-delayプロパティで少しタメを入れました(第100行目)。マウスポインタを重ねた:hover疑似クラスで、幕(疑似要素::beforeと::after)のアニメーションはtransition-durationプロパティで少し時間を縮めました(第118行目)。したがって、幕は閉じる方が開くときより速くなります。0.5s;}これで、画像にマウスポインタを重ねると両側から閉じる幕の上にテキストが表れ、ポインタを外せば幕が開いてテキストは消えます。ここまでのすべてのCSSをまとめたのが、つぎのコード003です。初めに掲げたサンプル001にはこのCSSが定められています。疑似要素::beforeと::afterは、:beforeおよび:afterと書くこともできます。2コロン(::)の書き方は、疑似クラスと見分けがつきやすいように、CSS3から定められました。