CSS3アニメーションでつくるインターフェイス表現

第10回 画像を3次元で水平に回すアニメーション

この記事を読むのに必要な時間:およそ 4 分

五角柱を組み立てる

それでは,5つの画像で五角柱を組み立てよう。前掲コード1に対して,3次元の操作やアニメーションを加える前に,つぎのようなCSSを定めた。

.container {
    margin: 1em auto;
    padding: 1em;

    width: 240px;
    height: 160px;
}

.spinner img {
    position: absolute;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

3次元の表現を加えるには,プロパティtransform-stylepreserve-3dを与え,perspectiveの値が定められていなければならない(第4回の要素にポインタを重ねたら水平軸で回す参照)⁠そのうえで,つぎのように各面のクラス(face-1~face-5)にそれぞれの面の角度と移動の位置決めをした。なお,0度の回転はデフォルトなので省いて構わない。

.container {

    perspective: 1200px;

}
.spinner {
    transform-style: preserve-3d;
}

.face {
    padding: 0px 7px;
}
.face-1 {
    transform: /* rotateY(0deg) */ translateZ(175px);
}
.face-2 {
    transform: rotateY(72deg) translateZ(175px);
}
.face-3 {
    transform: rotateY(144deg) translateZ(175px);
}
.face-4 {
    transform: rotateY(216deg) translateZ(175px);
}
.face-5 {
    transform: rotateY(288deg) translateZ(175px);
}

面のz軸方向の位置は少し遠め(175ピクセル)にした。各面の両端に少し余白をとった方が,背後の面も透けて立体感が増すからだ。そのため,paddingプロパティに左右の余白を定めた※1)⁠

※1
両端に同じ大きさの余白を与えるには,改めて面の幅を計算しなければならない。つぎの式から,幅が約254ピクセル(= 2×175×tan(π / 5))と導かれるので,240ピクセルの画像の左右に約7ピクセルの余白を加えればよい。
tanθ = (width / 2) / tz
width = 2tztanθ

これで,5つの画像で五角柱ができ上がる図5)⁠ここまでのCSSの定めをコード2にまとめた。

図5 5つの画像からつくられた五角柱

図5 5つの画像からつくられた五角柱

コード2 5つの面で3次元の五角柱を組み立てる

.container {
    margin: 1em auto;
    padding: 1em;
    perspective: 1200px;
    width: 240px;
    height: 160px;
}
.spinner {
    transform-style: preserve-3d;
}
.spinner img {
    position: absolute;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}
.face {
    padding: 0px 7px;
}
.face-1 {
    transform: translateZ(175px);
}
.face-2 {
    transform: rotateY(72deg) translateZ(175px);
}
.face-3 {
    transform: rotateY(144deg) translateZ(175px);
}
.face-4 {
    transform: rotateY(216deg) translateZ(175px);
}
.face-5 {
    transform: rotateY(288deg) translateZ(175px);
}

五角柱を水平に回す

いよいよアニメーションを定める。もっとも,このお題でややこしいのは,前項までに行った面の位置決め計算だ。プロパティanimationの使い方は,基本がtransitionと同じで,それに少し付け加えるだけといえる。つぎのように,時間とタイミング関数はtransitionと変わらない。繰り返し回数が与えられるのは,animationプロパティのよいところだ。繰り返し続けたいときは,値をinfiniteとする。一番の違いは,任意のアニメーション名を定めなければならないことである。

animation: 時間 タイミング関数 繰り返し回数 アニメーション名

今回は,以下のようにanimationプロパティを指定した。タイミング関数linearは,時間に対して値が線形で変わる。

.spinner {
    animation: 6s linear infinite spinner;

}

アニメーション名は@keyframes規則に与える。transitionプロパティは,始めと終わりのプロパティを定めると,その間をアニメーションした。@keyframes規則には,いくつでも経過点が加えられる。この経過点を「キーフレーム」と呼び,始めを0%,終わりを100%とするパーセンテージで与える。始めと終わりは,それぞれfromおよびtoというキーワードを用いてもよい。

@keyframes アニメーション名 {
    キーフレーム {
       /* プロパティの定め */
    }
}

もっとも今回は,決まった速さで回り続けるだけなので,つぎのように始めと終わりだけ定めれば足りる。さらにいえば,始めのプロパティはデフォルトの状態なので省いて構わない。

@keyframes spinner {
    /* from {
        transform: rotateY(0deg);
    } */
    to {
        transform: rotateY(-360deg);
    }
}

アニメーションのために加えたコードがあっけないほど簡単だったので,もうひとつ書き足すことにしよう。五角柱にマウスポインタを重ねたら,回転を止める。そのときに使うのが,animation-play-stateだ。つぎのように,値にpausedを与えるとアニメーションは一時停止する。デフォルト値は,アニメーションを実行するrunningになっている。書き上がったCSSの定めは,以下のコード3にまとめた。

.spinner:hover {
    animation-play-state: paused;
}

コード3 画像の五角柱を水平に回してマウスが重なったら止める

.container {
    margin: 1em auto;
    padding: 1em;
    perspective: 1200px;
    width: 240px;
    height: 160px;
}
.spinner {
    animation: 6s linear infinite spinner;
    transform-style: preserve-3d;
}
@keyframes spinner {
    to {
        transform: rotateY(-360deg);
    }
}
.spinner:hover {
    animation-play-state: paused;
}
.spinner img {
    position: absolute;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}
.face {
    padding: 0px 7px;
}
.face-1 {
    transform: translateZ(175px);
}
.face-2 {
    transform: rotateY(72deg) translateZ(175px);
}
.face-3 {
    transform: rotateY(144deg) translateZ(175px);
}
.face-4 {
    transform: rotateY(216deg) translateZ(175px);
}
.face-5 {
    transform: rotateY(288deg) translateZ(175px);
}

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入