ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

CSS3 perspective-origin プロパティ

CSS3 Reference 完全な CSS3 リファレンス

例

Set a 3D element's base placement:

div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari */
-webkit-perspective-origin: 10% 10%; /* Safari */
}

Try it yourself »

ブラウザ・サポート

Internet Explorer Firefox Opera Google Chrome Safari

perspective-origin property is not supported in any browser.

Safari supports an alternative, the -webkit-perspecitve-origin property.

定義と用法

perspective-origin property defines where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements.

When defining the perspective-origin property for an element, it is the CHILD elements that are positioned, NOT the element itself.

注: This property must be used together with the perspective property, and only affects 3D transformed elements!

For Safari users: To better understand the perspective-origin property, view a demo.

デフォルト値: 50% 50%
継承: no
バージョン: CSS3
JavaScript構文: object.style.perspectiveOrigin="10% 10%"

構文

perspective-origin: x-axis y-axis;

Property 値 説明
x-axis Defining where the view is placed at the x-axis

Possible values:

  • left
  • center
  • right
  • length
  • %

デフォルト値: 50%
y-axis Defining where the view is placed at the y-axis

Possible values:

  • top
  • center
  • bottom
  • length
  • %

デフォルト値: 50%

CSS3 Reference 完全な CSS3 リファレンス