CSS3：perspectiveプロパティ

名前	`perspective`
値	none \| <length[0,∞]>
初期値	none
適用対象	変形可能な要素
継承	されない
百分率	受容しない
算出値	キーワード none ／絶対長さ
正準的順序	文法に従う
アニメーション型	算出された値型による

none

遠近法による変形は適用されない。その効果は、数学的には、無限大の <length> 値に近似する。すべてのオブジェクトは、キャンバス上に平坦に現れる。

射影の中心からの距離。

課題：射影が射影の中心までの距離であることを検証する。【？】

ごく小さな <length> 値は、［奇妙な描画結果を生産し得る／変形計算の数量的な正確さを歪め得る］ので、1px 未満の値は、描画の目的においては 1px として扱うものとする。（この切り詰めは下層の値には影響しないので、スタイルシート内の perspective: 0 を直列化した結果は、依然として 0 になる。）

<DIV style="border:1px solid black;
 width:200px; height:100px;
 margin-top:75px;
">
  <DIV style="border:1px solid red;
   width:100%; height:100%;
   backface-visibility:visible;
   perspective-origin:150% 150%;
   transform-style:preserve-3d;
   perspective:150px;
  ">
    <DIV style="border:1px solid black;
     width:100px; height:100px;
     font-family:Arial;
     font-size: 60px; line-height:100px;
     color:white; background:#f003;
     text-align:center;
     transform:rotateY(90deg) translateZ(50px) translateX(-50px);
    ">3</DIV>
  </DIV>
</DIV>

perspective:150px;

<DIV style="border:1px solid black;
 width:200px; height:100px;
 margin-top:75px;
">
  <DIV style="border:1px solid red;
   width:100%; height:100%;
   backface-visibility:visible;
   perspective-origin:150% 150%;
   transform-style:preserve-3d;
   perspective:300px;
  ">
    <DIV style="border:1px solid black;
     width:100px; height:100px;
     font-family:Arial;
     font-size: 60px; line-height:100px;
     color:white; background:#f003;
     text-align:center;
     transform:rotateY(90deg) translateZ(50px) translateX(-50px);
    ">3</DIV>
  </DIV>
</DIV>

perspective:300px;

<DIV style="border:1px solid black;
 width:200px; height:100px;
 margin-top:75px;
">
  <DIV style="border:1px solid red;
   width:100%; height:100%;
   backface-visibility:visible;
   perspective-origin:150% 150%;
   transform-style:preserve-3d;
   perspective:600px;
  ">
    <DIV style="border:1px solid black;
     width:100px; height:100px;
     font-family:Arial;
     font-size: 60px; line-height:100px;
     color:white; background:#f003;
     text-align:center;
     transform:rotateY(90deg) translateZ(50px) translateX(-50px);
    ">3</DIV>
  </DIV>
</DIV>

perspective:600px;

このプロパティに対する none 以外の値は、積層文脈を確立する。それは、transform プロパティのときとちょうど同じ様に、すべての子孫用の包含ブロックも確立する。

課題：［積層文脈／包含ブロック］は、遠近法には本当は必要ではないが、これを変更すると、web 互換性を得られなくなるあろう。

［perspective／perspective-origin ］プロパティの値は、上述に従って透視行列の算出に利用される。

スクリプト：

スクリプト：

CSS3

プロパティ

perspective

テスト