Aug. 24th,2021
プロパティについて
＃
概要
“perspective”プロパティは要素の子要素が三次元変形された時に遠近感を表現するための視点からの距離を設定するプロパティです。
“perspective”プロパティは“z=0”の平面(xy-平面)と視点の間の距離を指定します。
“perspective”プロパティの値が小さければ小さいほど、z座標が“z=0”よりも大きい位置にある要素はより大きく、z座標が“z=0”よりも小さい位置にある要素はより小さく描画されます。逆に、“perspective”プロパティの値が大きければ大きいほど見かけの大きさの差は少なくなります。
“perspective”プロパティと“perspective-origin”プロパティの値は子要素の遠近感を表現するための視点マトリクスを算出するために使用されます。
“perspective”プロパティの値が“none”でない場合、要素は新たな重ね合わせコンテキストと包含ブロックを生成します。
サンプルコード
div { perspective: 800px;}
＃
値
| 値 | 説明 |
|---|---|
| none | 遠近感を生む変形は適用されません (子要素は平面状に配置されます。“<length>”値を極端に大きい値に設定した場合とほぼ同じです。) |
| <length> | “px”、“em”などで視点から描画の中央までの距離を指定 (“1px”より小さい値は“1px”の場合と同じように描画します。負の値は無効です。) |
| 共通キーワード |
＃
使用例
＃
視点までの距離を指定
<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; /* ■ */
}
橙
赤
黄
紫
青
