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

perspective-origin”プロパティ:視点の位置CSS3で追加

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

プロパティについて

概要

初期値 perspective-origin: 50% 50%;
適用対象 変形可能要素
継承 No
パーセント値 参照ボックスの寸法に依存
計算値 <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個組み合わせて位置を表します。

仕様書

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

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

定義あり
<length>
定義なし

定義あり
top
定義なし

定義あり
right
定義なし

定義あり
bottom
定義なし

定義あり
left
定義なし

定義あり
center
定義なし

定義あり

使用例

キーワード値で指定する

<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; /* */
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク