CSSパースペクティブプロパティ
例
3D配置された要素にいくつかの視点を与えます。
#div1
{
perspective: 100px;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このperspective
プロパティは、3D配置された要素に何らかの視点を与えるために使用されます。
プロパティは、perspective
オブジェクトがユーザーからどれだけ離れているかを定義します。したがって、値を低くすると、値を高くするよりも3D効果が強くなります。
要素のプロパティを定義する場合perspective
、要素自体ではなく、パースビューを取得するのはCHILD要素です。
ヒント:ユーザーが3Dオブジェクトを見ている位置を定義するperspective-originプロパティも確認してください。
パースペクティブプロパティをよりよく理解するには 、デモを表示します。
デフォルト値: | なし |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.perspective = "50px" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-または-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
perspective | 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: length|none;
プロパティ値
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
立方体を作成し、さまざまな視点を設定します。
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
関連ページ
CSSチュートリアル:CSS3D変換
HTML DOMリファレンス:パースペクティブプロパティ