CSS3

CSS関数

perspective()

→●、mdn

透視投影行列を指定する。

<length[0,∞]>

この行列は、空間の点を、その Z 値に基づいて X、Y 方向に拡縮する ― 正な Z 値を伴う点は、（画面上では）原点から離れる方向に拡大し、負な Z 値を伴う点は、原点に近付く方向に縮小する。z=0 平面上の点は不変になる。<length> パラメタは、視点から画面（z=0 平面）までの距離を表現する。この値を小さくする程、視点と画面の四隅を頂点とする四角錐は、より平たくなり、遠近法の効果が誇張されるようになる。例えば，値 1000px は中程度の遠近感を与え、値 200px は極度の遠近感を与える。

<IMG src="Com/Picture.jpg" style="border:1px solid red; width:50px; height:50px;
 transform:perspective(5cm) rotateY(45deg);
"><BR>

<IMG src="Com/Picture.jpg" style="border:1px solid red; width:50px; height:50px;
 transform:perspective(1cm) rotateY(45deg);
"><BR>

関連

transform。

テスト