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

第12回 垂直に回転して切り替わる直方体のタブ

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

3つのコンテンツを直方体に組み上げてタブで垂直に回す

それでは,まだアニメーションはさせないまま,3次元でコンテンツの3つの<div>要素class属性"tab-content")を直方体に組み上げよう。以下のようにtransformプロパティの3次元変換で,上面は上に90度回して持ち上げる。底面は下に90度回して下ろす。そのため,transform-originプロパティで変形の原点は,それぞれ上端中央と下端中央に定めた。正面は奥行きを手前に定めたので,少し大きさが増した図3)⁠この段階での見え方は,OSやブラウザなどの環境によって少し違うかもしれない。なお,タイトルの<h1>要素と画像の<div>要素class属性"tab-image")z-indexプロパティを与えたのは,画像の前にタイトルを出すためだ。

.tab-content h1 {

    z-index: 1;
}

.tab-content:nth-child(1) {
    transform: rotateX(90deg) translateY(-100px);
    transform-origin: top center;

}
.tab-content:nth-child(2) {
    transform: translateZ(100px);

}
.tab-content:nth-child(3) {
    transform: rotateX(-90deg) translateY(100px);
    transform-origin: bottom center;

}

.tab-image {

    z-index: -1;
}

図3 コンテンツを3次元の直方体に組み上げた

図3 コンテンツを3次元の直方体に組み上げた

これでコンテンツの3つの<div>要素class属性"tab-content")は直方体に組み上がった。といっても,回してみなければ確かめられない。タブのクリックに対するインタラクションには,つぎのように~結合子を用いる。前述のとおり,タブの<label>要素にfor属性でラジオボタン<input>要素)id属性を与えたことにより,タブのクリックでラジオボタンが選ばれる。そのラジオボタンに応じて,直方体の<div>要素class属性"")をx軸でそれぞれ異なる角度垂直に回した。あとは,直方体の<div>要素にtransitionプロパティを加えればアニメーションになる。なお,transform-originプロパティで変形の原点を決め,transform-styleで3次元の変形を定めている。でき上がったCSSの記述は,以下のコード2にまとめた。

.cube {

    transform-origin: center 100px;
    transform-style: preserve-3d;
    transition: transform 0.5s ease-in;
}

#tab-top:checked ~ .cube {
    transform: rotateX(-90deg);
}
#tab-front:checked ~ .cube {
    transform: rotateX(0deg);
}
#tab-bottom:checked ~ .cube {
    transform: rotateX(90deg);
}

コード2 タブのクリックで直方体のコンテンツを回す

.container {
    perspective: 1200px;
    width: 400px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    color: white;
    text-align: center;
}
input {
    display: none;
}
.tab {
    position: absolute;
    width: 80px;
    height: 70px;
    left: 325px;
    line-height: 70px;
    font-weight: 300;
}
.tab:nth-child(1) {
    background: mediumturquoise;
}
.tab:nth-child(2) {
    top: 74px;
    background: steelblue;
}
.tab:nth-child(3) {
    top: 148px;
    background: deeppink;
}
.cube {
    margin: 60px 10px auto;
    width: 300px;
    transform-origin: center 100px;
    transform-style: preserve-3d;
    transition: transform 0.5s ease-in;
}
.tab-content {
    width: 300px;
    height: 200px;
    position: absolute;
}
.tab-content h1 {
    font-size: 30px;
    margin: 75px 115px;
    text-align: center;
    font-weight: 500;
    z-index: 1;
}
.tab-content:nth-child(1) {
    transform: rotateX(90deg) translateY(-100px);
    transform-origin: top center;
    background: mediumturquoise;
}
.tab-content:nth-child(2) {
    transform: translateZ(100px);
    background: steelblue;
}
.tab-content:nth-child(3) {
    transform: rotateX(-90deg) translateY(100px);
    transform-origin: bottom center;
    background: deeppink;
}
#tab-top:checked ~ .cube {
    transform: rotateX(-90deg);
}
#tab-front:checked ~ .cube {
    transform: rotateX(0deg);
}
#tab-bottom:checked ~ .cube {
    transform: rotateX(90deg);
}
.tab-image {
    margin: 20px 30px;
    position: absolute;
    z-index: -1;
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入