例
要素が表示されている場所からの視点を設定します。
div
{
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}
»それを自分で試してみてください 定義と使用法
透視プロパティは、3D要素がビューから配置されているどのように多くのピクセルを定義します。 このプロパティは、あなたは、3Dの要素が表示されている方法についての視点を変更することができます。
要素の透視プロパティを定義するとき、それは斜視図、NOT素子自体を取得する子要素です。
Note:遠近プロパティは、3D変換された要素に影響します！
Tip:一緒にこのプロパティを使用して遠近原産のあなたは、3D要素の底部位置を変更することができますプロパティ、。
よりよい透視性を理解するには、 デモを見ます 。
| デフォルト値： | none |
|---|---|
| 継承されました： | no |
| アニメーション： | yes. Read about animatable Try it |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.perspective="50px" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
数字は-webkit-に続くかの接頭辞で働いていた最初のバージョンを指定します-moz-。
| プロパティ | |||||
|---|---|---|---|---|---|
| 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;プロパティ値
| プロパティ値 | 説明 |
|---|---|
| length | どこまで要素がビューから配置されています |
| なし | デフォルト値。 視点が設定されていない0と同じ |
| 初期 | このプロパティがデフォルト値に設定します。 初期についての記事を読みます |
| 受け継ぎます | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSSチュートリアル： CSS 3Dトランスフォーム
HTML DOMリファレンス： perspective property