mozilla
Your Search Results

    perspective-origin リダイレクト 1

    これは実験段階の機能です。
    この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

    概要

    CSSperspective-origin プロパティは、ユーザの見ている位置を決めます。これは perspective プロパティによって消失点として使われます。

    • 初期値 50% 50%
    • 適用対象 transform 可能要素
    • 継承 しない
    • 相対値の基準 bounding box のサイズ
    • メディア visual
    • 計算値 絶対値の length または none
    • アニメーションの可否

    構文

    形式文法: [ <percentage> | <length> | left | center | right | top | bottom] |
                    [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]
    
    perspective-origin: x-position            /* one-value syntax */
    perspective-origin: x-position y-position /* two-value syntax */
    
    When both x-position and y-position are keywords, the following is also valid:
    perspective-origin: y-position x-position
    

    x-position
    消失点の横座標上の位置を示します。次のいずれかの値です:
    • <割合> は要素の幅を基準にした位置を示します。負の数も使えます。
    • <length> は length 値を使って位置を示します。負の数も使えます。
    • left キーワードは length 値 0 を示すショートカットです。
    • center キーワードは パーセンテージ値 50% を示すショートカットです。
    • right キーワードは パーセンテージ値 100% を示すショートカットです。
    y-position
    消失点の縦座標上の位置を示します。次のいずれかの値です:
    • <割合> は要素の高さを基準にした位置を示します。負の数も使えます。
    • <length> は length 値を使って位置を示します。負の数も使えます。
    • top キーワードは length 値 0 を示すショートカットです。
    • center キーワードはパーセンテージ値 50% を示すショートカットです。
    • bottom, キーワードはパーセンテージ値 100% を示すキーワードです。

    perspective-origin:top left; perspective-origin:top; perspective-origin:top right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    perspective-origin:left; perspective-origin:50% 50%; perspective-origin:right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    perspective-origin:bottom left; perspective-origin:bottom; perspective-origin:bottom right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6

    仕様

    仕様書 策定状況 コメント
    CSS Transforms Level 1
    The definition of 'perspective-origin' in that specification.
    草案  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート 12-webkit 10 (10)-moz
    16 (16)
    10 未サポート (有)-webkit
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート 3.0-webkit 10.0 (10)-moz
    16.0 (16)
    ? 未サポート (有)-webkit

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: ethertank
    最終更新者: ethertank,
    サイドバーを隠す