perspective-origin

CSS の perspective-origin プロパティは、閲覧者が見ている位置を決めます。これは perspective プロパティによって消失点として使われます。

構文

/* １値構文 */
perspective-origin: x-position;

/* ２値構文 */
perspective-origin: x-position y-position;

/* x-position と y-position がキーワードである場合は、
   以下の構文も有効 */
perspective-origin: y-position x-position;

/* グローバル値 */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: unset;

値

x-position

消失点の横座標上の位置を示します。次のいずれかの値です。

<length-percentage> は、絶対的な length 値、又は要素の幅に対する相対値で位置を示します。負の数も使えます。
left キーワードは、 length 値 0 を示すショートカットです。
center キーワードは、パーセント値 50% を示すショートカットです。
right キーワードは、パーセント値 100% を示すショートカットです。

y-position

消失点の縦座標上の位置を示します。次のいずれかの値です。

<length> は、絶対的な length 値、又は要素の高さに対する相対値で位置を示します。負の数も使えます。
top キーワードは、 length 値 0 を示すショートカットです。
center キーワードは、パーセント値 50% を示すショートカットです。
bottom キーワードは、パーセント値 100% を示すキーワードです。

形式文法

<position>where 
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where 
<length-percentage> = <length> | <percentage>

例

視点の変更

この例は主要な perspective-origin 値で立方体を表示します。

結果

HTML

<table>
  <tbody>
    <tr>
      <th>
        <code>perspective-origin: top left;</code>
      </th>
      <th>
        <code>perspective-origin: top;</code>
      </th>
      <th>
        <code>perspective-origin: top right;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube potl">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube potm">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube potr">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th>
        <code>perspective-origin: left;</code>
      </th>
      <th>
        <code>perspective-origin: 50% 50%;</code>
      </th>
      <th>
        <code>perspective-origin: right;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube poml">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pomm">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pomr">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th>
        <code>perspective-origin: bottom left;</code>
      </th>
      <th>
        <code>perspective-origin: bottom;</code>
      </th>
      <th>
        <code>perspective-origin: bottom right;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pobl">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pobm">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pobr">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS

/* perspective-origin の値のための一括指定クラス */
.potl {
  perspective-origin: top left;
  -webkit-perspective-origin: top left;
}

.potm {
  perspective-origin: top;
  -webkit-perspective-origin: top;
}

.potr {
  perspective-origin: top right;
  -webkit-perspective-origin: top right;
}

.poml {
  perspective-origin: left;
  -webkit-perspective-origin: left;
}

.pomm {
  perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
}

.pomr {
  perspective-origin: right;
  -webkit-perspective-origin: right;
}

.pobl {
  perspective-origin: bottom left;
  -webkit-perspective-origin: bottom left;
}

.pobm {
  perspective-origin: bottom;
  -webkit-perspective-origin: bottom;
}

.pobr {
  perspective-origin: bottom right;
  -webkit-perspective-origin: bottom right;
}

/* コンテナーの div、立方体の div、面の一般的な設定 */
.container {
  width: 100px;
  height: 100px;
  margin: 24px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective: 300px;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  -webkit-perspective: 300px;
  -webkit-transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* 方向に基づいてそれぞれの面を設定 */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
  -webkit-transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
  -webkit-transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
  -webkit-transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
  -webkit-transform: rotateX(90deg) translateZ(50px)
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}

/* テーブルの見栄えをよくする */
th, p, td {
  background-color: #EEEEEE;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}

仕様書

仕様書	状態	備考
CSS Transforms Level 2 perspective-origin の定義	編集者草案	初回定義。

初期値	`50% 50%`
適用対象	変形可能要素
継承	不可
パーセンテージ	bounding box のサイズ
メディア	visual
計算値	`<length>` の場合は絶対的な値、さもなくばパーセンテージ
アニメーションの種類	simple list of length, percentage, or calc
正規順序	One or two values, with length made absolute and keywords translated to percentages

機能	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本対応	12 -webkit-	12 12 -webkit-	16 10 -moz- 49 -webkit- 45 -webkit- ¹	10	15 -webkit-	あり -webkit-

機能

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

基本対応

12 -webkit-

10 -moz-

49 -webkit-

45 -webkit- ¹

15 -webkit-

あり -webkit-

機能	Android webview	Chrome for Android	Edge mobile	Firefox for Android	Opera Android	iOS Safari	Samsung Internet
基本対応	3 -webkit-	?	ありあり -webkit-	16 10 -moz- 49 -webkit- 45 -webkit- ¹	あり -webkit-	あり -webkit-	?

機能

Android webview

Chrome for Android

Edge mobile

Firefox for Android

Opera Android

iOS Safari

Samsung Internet

基本対応

3 -webkit-

あり

あり -webkit-

10 -moz-

49 -webkit-

45 -webkit- ¹

あり -webkit-

1. From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Edge Mobile	Android 版 Firefox	Android 版 Opera	iOS 版 Safari	Samsung Internet
基本対応	完全対応 12 接頭辞付き完全対応 12 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	完全対応 12 完全対応 12 完全対応 12 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	完全対応 16 完全対応 16 完全対応 10 接頭辞付き接頭辞付き -moz- のベンダー接頭辞が必要完全対応 49 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要完全対応 45 接頭辞付き無効接頭辞付き -webkit- のベンダー接頭辞が必要無効 From version 45: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	完全対応 10	完全対応 15 接頭辞付き完全対応 15 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	完全対応あり接頭辞付き完全対応あり接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	完全対応 3 接頭辞付き完全対応 3 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	?	完全対応あり完全対応あり完全対応あり接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	完全対応 16 完全対応 16 完全対応 10 接頭辞付き接頭辞付き -moz- のベンダー接頭辞が必要完全対応 49 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要完全対応 45 接頭辞付き無効接頭辞付き -webkit- のベンダー接頭辞が必要無効 From version 45: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	完全対応あり接頭辞付き完全対応あり接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	完全対応あり接頭辞付き完全対応あり接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	?

凡例

完全対応: 完全対応
実装状況不明: 実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。: ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。: 使用するには、ベンダー接頭辞または異なる名前が必要です。

perspective-origin

構文

値

形式文法

例

視点の変更

結果

HTML

CSS

仕様書

ブラウザーの対応

凡例

関連情報

ドキュメントのタグと貢献者

perspective-origin

構文

値

形式文法

例

視点の変更

結果

HTML

CSS

仕様書

ブラウザーの対応

凡例

関連情報

ドキュメントのタグと貢献者

最高のウェブ開発を学びましょう

ありがとうございます！ 購読確認用の新着メールを探してください。

ありがとうございます！購読確認用の新着メールを探してください。