CSS3

プロパティ

perspective-origin

→●、mdn

perspective プロパティ用の原点を確立する。

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

perspective-origin に対する値は、遠近法の原点の、基準ボックスの左上隅からのオフセットを表現する。

<position> ●

＝[
　[left | center | right] || [top | center | bottom]
|
　[left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>]?
|
　[[left | right] <length-percentage>] && [[top | bottom ] <length-percentage>]
]

[left | center | right] || [top | center | bottom]

横方向と縦方向。出現の順番はどちらでも構わない。

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:left top;
  ">
    <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-origin:left bottom;

[left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>]?

横方向と縦方向で、パーセンテージを含むことができて、空白を挟んで指定。片方を省いた場合は横方向のみの指定。¶省かれたもう片方はcenterになるようだ。

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:left 30%;
  ">
    <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-origin:left 30%;

[[left | right] <length-percentage>] && [[top | bottom ] <length-percentage>]

横のパーセンテージと、縦のパーセンテージ。

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:left 30% top 90%;
  ">
    <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-origin:left 30% top 90%;

<length-percentage> ○

[<length> | <percentage> ]

<length> ○

長さ値は固定な長さをオフセットとして与える。オフセット値は、基準ボックスの左上隅からの［横／縦］オフセットを表現する。

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:50px;
  ">
    <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-origin:50px;

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:90px;
  ">
    <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-origin:90px;

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:170px;
  ">
    <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-origin:170px;

<percentage> ○

遠近法オフセットに対する［横／縦］の百分率値は、基準ボックスの［横幅／縦幅］に相対的になる。【絶対化された結果の】オフセット値は、基準ボックスの左上隅からの［横／縦］オフセットを表現する。

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:30%;
  ">
    <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-origin:30%;

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:100%;
  ">
    <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-origin:100%;

top、
right、
bottom、
left

所与の成分値の個数が 3 個 以上ある下で、これらのキーワードの次の成分として［<percentage>／<length>］値が与えられたならば、その値は、上に挙げられた順に［上端、右端、下端、左端］辺からのオフセットを表現することになる。

他の場合、これらのキーワードは、上に挙げられた順に［縦位置に対する 0%、横位置に対する 100%、縦位置に対する 100%、横位置に対する 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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:top;
  ">
    <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-origin:top;

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:right;
  ">
    <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-origin:right;

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:bottom;
  ">
    <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-origin:bottom;

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:left;
  ">
    <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-origin:left;

center

横位置が指定されていない場合、横位置に対する 50%（left 50%）に算出される。他の場合、縦位置に対する 50%（top 50%）に算出される。

<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;
   transform-style:preserve-3d;
   perspective:300px;
   perspective-origin:center;
  ">
    <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-origin:center;

perspective-origin の解決値は、height の様に特別 とする。[CSSOM]

テスト