CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 perspective-origin 属性 CSS ページ-break-inside 属性

CSS3 perspective 属性の使用方法及び例

perspective CSS属性は、視覚オブジェクトのすべての子要素の透視を定義します。これは通常、Z = 0平面と視覚化者間の距離を決定し、3d位置要素を深みのある感じで定義する。Z > 0の各要素3D要素が大きくなり、Z < 0の各要素3D要素が小さくなります。

以下のテーブルは、この属性の使用方法とバージョン履歴、およびJavaScriptスクリプトでの使用文法を説明します。

デフォルト値：	none
適用可能：	変形可能要素
継承：	ありません
アニメーション可能：	は。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript文法：	object.style.perspective=500

Perspectiveの使用文法

この属性の文法は以下の通りです：

perspective:　length　|　none　|　initial　|　inherit

以下の例は、perspective属性の使用方法を示します。

例

.container　{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px　solid　#e5a043;
　　　　background:　#fff2dd;
}
.transformed　{
　　　　-webkit-transform:　translate3d(25px,　25px,　50px);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　translate3d(25px,　25px,　50px);　
}

試してみる‹/›

属性値

以下のテーブルは、この属性の値を説明します。

値	説明
length	透視深さの長さ値を示します。0または負の数の場合、透视変換は適用されません。
none	透视変換を適用しない。デフォルト値です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のperspectiveの属性値を使用します。

ブラウザ互換性

perspective属性のブラウザの互換性について、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 10+ ^-moz-、16 + Google Chrome 12+ ^-webkit-、36+ Internet Explorer 10+ Apple Safari 4.0.3+ ^-webkit- Opera 15+ ^-webkit-、23+

さらに詳しく

以下のチュートリアルを参照してください：CSS3 3D変換。

CSS3 perspective-origin 属性 CSS ページ-break-inside 属性