Aug. 24th,2021
プロパティについて
＃
概要
| 初期値 | “perspective-origin: 50% 50%;” |
| 適用対象 | 変形可能要素 |
| 継承 | No |
| パーセント値 | 参照ボックスの寸法を“100%”とする |
| 計算値 | “<length-percentage>”値の算出された値で表された左上からの水平と垂直方向のオフセット距離をアイテムとするリスト |
| アニメーション | 計算値 |
“perspective-origin”プロパティは要素の子要素が三次元変形された時に遠近感を表現するための視点を設定するプロパティです。
“perspective-origin”プロパティによって指定された位置は消失点の位置となります。既定では描画の中心です。
“perspective-origin”プロパティと“perspective”プロパティの値は子要素の遠近感を表現するための視点マトリクスを算出するために使用されます。
サンプルコード
div { perspective-origin: top right;}
＃
値
| 値 | 説明 |
|---|---|
| “<position>”値 | |
| <percentage> | 水平方向の場合は参照ボックスの横幅、水平方向の場合は参照ボックスの高さを“100%”として視点の位置を指定する (参照ボックスの左上からの距離で指定します。) |
| <length> | “px”、“em”などで視点の位置を指定する (参照ボックスの左上からの距離で指定します。) |
| top | 垂直方向の距離を“0%”とした場合と同じ (値が4個記述される場合は続いて記述されるオフセット距離の基準を参照ボックスの上端に指定します。) |
| right | 水平方向の距離を“100%”とした場合と同じ (値が4個記述される場合は続いて記述されるオフセット距離の基準を参照ボックスの右端に指定します。) |
| bottom | 垂直方向の距離を“100%”とした場合と同じ (値が4個記述される場合は続いて記述されるオフセット距離の基準を参照ボックスの下端に指定します。) |
| left | 水平方向の距離を“0%”とした場合と同じ (値が4個記述される場合は続いて記述されるオフセット距離の基準を参照ボックスの左端に指定します。) |
| center | 水平方向の距離を“50%”とした場合と同じ (他の値が水平方向の位置を指定していれば垂直方向の位置を“50%”とした場合と同じです。) |
| 他の値 | |
| 共通キーワード | |
“<position>”値は“left”、“center”、“right”、“top”、“bottom”と“<length-percentage>”値を1個、2個もしくは4個組み合わせて位置を表します。
＃
使用例
＃
キーワード値で指定する
<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;
perspective-origin: top;
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: 300px;
perspective-origin: right;
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: 300px;
perspective-origin: bottom;
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: 300px;
perspective-origin: left;
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: 300px;
perspective-origin: center;
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: 300px;
perspective-origin: top left;
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: 300px;
perspective-origin: bottom right;
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; /* ■ */
}
橙
赤
黄
紫
青
＃
“<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;
perspective-origin: 50px 50px;
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; /* ■ */
}
橙
赤
黄
紫
青
＃
“<percentage>”値で指定する
<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;
perspective-origin: 25% 25%;
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: 300px;
perspective-origin: bottom 50px right 50px;
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; /* ■ */
}
橙
赤
黄
紫
青
