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

第21回 スライドする立方体

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

マウスポインタが重なった立方体の色を変える

立方体にマウスポインタが重なったら:hover擬似クラス)⁠3つの面の色をつぎのように変える。さらに,ポインタの乗った面は色を濃くしている図3)⁠

<style>要素

.cube:hover .face-right,
.cube:hover .face-left,
.cube:hover .face-top div {
    background-color: #ffc;
}
.cube:hover .face-right:hover,
.cube:hover .face-left:hover,
.cube:hover .face-top:hover div {
    background-color: #ffa;
}

図3 立方体にマウスポインタを重ねると色が変わる

図3 立方体にマウスポインタを重ねると色が変わる

マウスポインタが重なった立方体をスライドさせる

マウスポインタが重なった立方体はスライドさせよう。CSSは,つぎのようにtransformプロパティにtranslate()関数を定めるだけだ。とはいえ,これもピクセル単位で細かく調整しなければならない。transitionプロパティには,パラメータとして変化させたいプロパティtransformを加えた。いつものように省けば,デフォルトはすべてallとされるので,それでも差し支えはない。タイミング関数は,機械的な線形のlinearを選んだ。

<style>要素

.cube {
    transition: transform 1s linear;
}
.cube:hover {
    transform: translate(108px, 64px);
}

これで3つの立方体が組み立てられ,マウスポインタを重ねると色が変わってスライドする図4)⁠CSSの定めは,以下のコード2にまとめた。はじめの見た目より簡単に感じたのではないだろうか。3次元でなく2次元の変換を使ったためだ。だが,大きさや角度を変えたりすると,ピクセル単位の調整に少し手間どるかもしれない。さて,昨年1月からはじまった本連載は,今回で幕を閉じる。JavaScriptは使わず,CSSだけでさまざまなインターフェイス表現をつくってきた。その可能性を少しでも感じていただけたなら幸いである。

図4 立方体にマウスポインタを重ねた立方体の色が変わってスライドする

図4 立方体にマウスポインタを重ねた立方体の色が変わってスライドする

コード2 ポインタを重ねた立方体の色が変わってスライドする
<style>要素

body {
    line-height: 1.5em;
    color: #666;
    background: #f1ebe2;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: 200;
}
p, h2 {
    margin: 0;
    font-size: 100%;
}
.container {
    min-height: 500px;
}
.cube {
    position: absolute;
    left: 50%;
    top: 150px;
}
.cube p {
    line-height: 14px;
    font-size: 12px;
    margin-bottom: 24px;
}
.cube h2 {
    font-weight: bold;
}
.cube.two {
    top: 213px;
    left: 48%;
    margin-left: -100px;
}
.cube.three {
    top: 276px;
    left: 46%;
    margin-left: -200px;
}
.face-right,
.face-left,
.face-top div {
    padding: 10px;
    width: 90px;
    height: 90px;
}
.face-right,
.face-left,
.face-top {
    position: absolute;
}
.cube:hover .face-right,
.cube:hover .face-left,
.cube:hover .face-top div {
    background-color: #ffc;
}
.cube:hover .face-right:hover,
.cube:hover .face-left:hover,
.cube:hover .face-top:hover div {
    background-color: #ffa;
}
.face-left {
    transform: skewY(30deg);
    background-color: #ccc;
}
.face-right {
    transform: skewY(-30deg);
    background-color: #ddd;
    left: 109px;
}
.face-top div {
    transform: skewY(-30deg) scaleY(1.16);
    background-color: #eee;
    font-size: 0.862em;
}
.face-top {
    transform: rotate(60deg);
    top: -86px;
    left: 55px;
}
.cube {
    transition: transform 1s linear;
}
.cube:hover {
    transform: translate(108px, 64px);
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書