[CSS]transform-styleとかperspectiveに後ろ髪を引かれてたからやってみた

2013/8/19 css

[CSS]transformとかperspectiveに後ろ髪を引かれてたからやってみた

天気悪いっすね下山です。
寝ても覚めても納期に追われてます。

CSS3から新登場のtransform-styleとかperspectiveが気になってまして・・・transform系はjQueryだろーが！とか思ってまして・・・食わず嫌いは良くないと思いましてね。
じゃあ写真とか回してみようじゃないってことでね。
CSS3辞典とか引っ張りだしたりgoogleセンセーに聞いてみたりしたわですよ。

最初で言っておきます。
きっと使い道はないと思うの・・・

demo

ではhtmlから

Default
1
2
3
4
5
6
7
8
<div class="ef_3d">
<a class="rollover">
<figure class="box">
<img src="img/3d_01.jpg" class="front" alt="マイメロ">
<img src="img/3d_02.jpg" class="back" alt="ぬこ">
</figure>
</a>
</div>

基本はdivの中に画像を2枚。
この画像に奥行きを付けてマウスオーバーで前後入れ替えるアクロバットをやってみようと。もちろん3Dですよ！オクサン！

でCSSは

Default
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.rollover {
    position: relative;
    width: 306px;
    height: 306px;
    display: block;
}
.front {
    z-index: 2;
    position: absolute;
}
.back {
    z-index: 1;
    position: absolute;
}
.ef_3d {
width:500px;
margin:100px auto;
}
.rollover {
    -webkit-perspective: 1600px;
    -moz-perspective: 1600px;
    -ms-perspective: 1600px;
    -o-perspective: 1600px;
    perspective: 1600px;
}
 
.box {
    width: 306px;
    height: 306px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
 
.front {
    -webkit-transform: translate3d(0,0,150px);
    -moz-transform: translate3d(0,0,150px);
    -ms-transform: translate3d(0,0,150px);
    -o-transform: translate3d(0,0,150px);
    transform: translate3d(0,0,150px);
}
 
.back {
    -webkit-transform: rotateY(180deg) translate3d(0,0,150px);
    -moz-transform: rotateY(180deg) translate3d(0,0,150px);
    -ms-transform: rotateY(180deg) translate3d(0,0,150px);
    -o-transform: rotateY(180deg) translate3d(0,0,150px);
    transform: rotateY(180deg) translate3d(0,0,150px);
}
 
.rollover:hover .box {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

長っ！

まずは

Default
1
perspective: 1600px;

perspectiveプロパティはtransformを使用するときの奥行きを指定します。
今回みたいに3Dで回転させたりする際は奥行きがないとZ軸が生きてきません。
値は1以上で指定しますが、値が小さければ小さいほど遠近感が強くなり、大きければ大きいほど緩やかになります。

次に

Default
1
transform-style: preserve-3d;

transform-styleプロパティは子要素をフラットに描画するか立体で描画するかを指定できます。
値はpreserve-3d(立体)とflat(フラット)があります。

Default
1
transition: 1s;

transitionプロパティは時間効果を指定します。1秒で回転して！ってことです。

Default
1
transform: translate3d(0,0,150px);

transformプロパティにtranslate3d(X.Y.Z)を指定すると各軸の交点からの距離を指定できます。
今回はZに150pxを指定してますので全面に150px突き出てる感じです。（もちろん視点に近づいてますから画像は実サイズよりも大きく表示されます。）
そして

Default
1
transform: rotateY(180deg) translate3d(0,0,150px);

もう一枚の画像にこれを指定することによって180度回転させてZ軸150pxなので見た目は表の画像の裏にひっくり返って小さく表示されるわけです。（実際は隠れますので表示されません）

以上を適用したらマウスオーバーでboxごと180度回転させるだけです。

Default
1
transform: rotateY(180deg);

ちなみにrotateYをrotateXとすると縦回転になりますが、.backのrotateYをrotateXにする必要がありますので気をつけて！

とりあえず「へーこんなこと出来るんだねー」的な理解で記事にしました。

な！使い道ないだろーが！

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

下山 光揮

スポンサーリンク