このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

perspective”プロパティ:視点までの距離CSS3で追加

記事Aug. 24th,2021
視点までの距離を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 perspective: none;
適用対象 変形可能要素
継承 No
パーセント値 パーセント値は指定できません
計算値 指定した値
アニメーション 離散

perspective”プロパティは要素の子要素が三次元変形された時に遠近感を表現するための視点からの距離を設定するプロパティです。

perspective”プロパティは“z=0”の平面(xy-平面)と視点の間の距離を指定します。

perspective”プロパティの値が小さければ小さいほど、z座標が“z=0”よりも大きい位置にある要素はより大きく、z座標が“z=0”よりも小さい位置にある要素はより小さく描画されます。逆に、“perspective”プロパティの値が大きければ大きいほど見かけの大きさの差は少なくなります。

perspective”プロパティとperspective-origin”プロパティの値は子要素の遠近感を表現するための視点マトリクスを算出するために使用されます。

perspective”プロパティの値が“none”でない場合、要素は新たな重ね合わせコンテキストと包含ブロックを生成します。

サンプルコード

div { perspective: 800px;}

説明
none 遠近感を生む変形は適用されません (子要素は平面状に配置されます。<length>”値を極端に大きい値に設定した場合とほぼ同じです。)
<length> pxemなどで視点から描画の中央までの距離を指定 (“1px”より小さい値は“1px”の場合と同じように描画します。負の値は無効です。)
共通キーワード

仕様書

定義されている仕様書
Level 1 Level 2
勧告候補(CR) 作業草稿(WD)
perspective
定義なし

定義あり
Level 1 Level 2
勧告候補(CR) 作業草稿(WD)
none
定義なし

定義あり
<length>
定義なし

定義あり

使用例

視点までの距離を指定

<div class="sample-outer-box">
<div class="sample-inner-box1">

</div>
<div class="sample-inner-box2">

</div>
<div class="sample-inner-box3">

</div>
<div class="sample-inner-box4">

</div>
<div class="sample-inner-box5">

</div>
</div>
.sample-outer-box {
perspective: 300px;
transform-style: preserve-3d;
}

@keyframes SampleRotation {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(0deg); }
}

.sample-inner-box1 {
animation: 5s ease infinite SampleRotation;
background-color: #ee7800; /* */
}

.sample-inner-box2 {
animation: 5s ease infinite SampleRotation;
background-color: #c9171e; /* */
}

.sample-inner-box3 {
animation: 5s ease infinite SampleRotation;
background-color: #fcc800; /* */
}

.sample-inner-box4 {
animation: 5s ease infinite SampleRotation;
background-color: #aa4c8f; /* */
}

.sample-inner-box5 {
animation: 5s ease infinite SampleRotation;
background-color: #00a3af; /* */
}
.sample-outer-box {
perspective: 800px;
transform-style: preserve-3d;
}

@keyframes SampleRotation {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(0deg); }
}

.sample-inner-box1 {
animation: 5s ease infinite SampleRotation;
background-color: #ee7800; /* */
}

.sample-inner-box2 {
animation: 5s ease infinite SampleRotation;
background-color: #c9171e; /* */
}

.sample-inner-box3 {
animation: 5s ease infinite SampleRotation;
background-color: #fcc800; /* */
}

.sample-inner-box4 {
animation: 5s ease infinite SampleRotation;
background-color: #aa4c8f; /* */
}

.sample-inner-box5 {
animation: 5s ease infinite SampleRotation;
background-color: #00a3af; /* */
}
.sample-outer-box {
perspective: 1300px;
transform-style: preserve-3d;
}

@keyframes SampleRotation {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(0deg); }
}

.sample-inner-box1 {
animation: 5s ease infinite SampleRotation;
background-color: #ee7800; /* */
}

.sample-inner-box2 {
animation: 5s ease infinite SampleRotation;
background-color: #c9171e; /* */
}

.sample-inner-box3 {
animation: 5s ease infinite SampleRotation;
background-color: #fcc800; /* */
}

.sample-inner-box4 {
animation: 5s ease infinite SampleRotation;
background-color: #aa4c8f; /* */
}

.sample-inner-box5 {
animation: 5s ease infinite SampleRotation;
background-color: #00a3af; /* */
}

子要素を二次元平面に配置

<div class="sample-outer-box">
<div class="sample-inner-box1">

</div>
<div class="sample-inner-box2">

</div>
<div class="sample-inner-box3">

</div>
<div class="sample-inner-box4">

</div>
<div class="sample-inner-box5">

</div>
</div>
.sample-outer-box {
perspective: none;
transform-style: preserve-3d;
}

@keyframes SampleRotation {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(0deg); }
}

.sample-inner-box1 {
animation: 5s ease infinite SampleRotation;
background-color: #ee7800; /* */
}

.sample-inner-box2 {
animation: 5s ease infinite SampleRotation;
background-color: #c9171e; /* */
}

.sample-inner-box3 {
animation: 5s ease infinite SampleRotation;
background-color: #fcc800; /* */
}

.sample-inner-box4 {
animation: 5s ease infinite SampleRotation;
background-color: #aa4c8f; /* */
}

.sample-inner-box5 {
animation: 5s ease infinite SampleRotation;
background-color: #00a3af; /* */
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク