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 のサイズ
メディア	視覚
計算値	`<length>` の場合は絶対的な値、さもなくばパーセンテージ
アニメーションの種類	length, percentage, 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
基本対応	Chrome 完全対応 12 接頭辞付き完全対応 12 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Edge 完全対応 12 完全対応 12 完全対応 12 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Firefox 完全対応 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.	IE 完全対応 10	Opera 完全対応 15 接頭辞付き完全対応 15 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Safari 完全対応あり接頭辞付き完全対応あり接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	WebView Android 完全対応 3 接頭辞付き完全対応 3 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Chrome Android ?	Edge Mobile 完全対応あり完全対応あり完全対応あり接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Firefox Android 完全対応 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.	Opera Android 完全対応あり接頭辞付き完全対応あり接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Safari iOS 完全対応あり接頭辞付き完全対応あり接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Samsung Internet Android ?

凡例

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

perspective-origin

構文

値

形式文法

例

視点の変更

結果

HTML

CSS

仕様書

ブラウザーの対応

凡例

関連情報

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

perspective-origin

構文

値

形式文法

例

視点の変更

結果

HTML

CSS

仕様書

ブラウザーの対応

凡例

関連情報

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

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

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

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