CSSパースペクティブ-originプロパティ
例
ユーザーが3D配置された要素を見ている位置を定義します。
#div1
{
perspective: 100px;
perspective-origin: left;
}
定義と使用法
このperspective-origin
プロパティは、ユーザーが3D位置の要素を見ている位置を定義します。
要素のプロパティを定義するときperspective-origin
、効果を得るのは要素自体ではなく、CHILD要素です。
注:このプロパティは、パースペクティブプロパティと組み合わせて使用する必要があり ます。
パースペクティブオリジンプロパティをよりよく理解するには 、デモを表示します。
デフォルト値: | 50%50% |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.perspectiveOrigin = "10px 50%" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-または-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
CSS構文
perspective-origin: x-axis y-axis|initial|inherit;
プロパティ値
Property Value | Description |
---|---|
x-axis | Defining where the view is placed at the x-axis Possible values:
Default value: 50% |
y-axis | Defining where the view is placed at the y-axis Possible values:
Default value: 50% |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
関連ページ
CSSチュートリアル:CSS3D変換
HTML DOMリファレンス: perspectiveOriginプロパティ