CSSでの2D変換についてのまとめ共有-CSSチュートリアル-php.cn

CSSでの2D変換についてのまとめ共有

黄舟

リリース： 2017-08-11 13:25:17

オリジナル

1830 人が閲覧しました

CSS における 2D 変換の形式は次のとおりです:

选择器{
transform：转换函数（参数，参数）；
}

ログイン後にコピー

ここで、transform (_{は transfrom} ではなく、transform です) は要素の 2D または 3D 変換を定義します。

2D 変換関数は 5 つのカテゴリに分類されます。 :

translate() は、ディスプレイスメントの関数を定義します。次のパラメーターは、x 軸と y 軸に対する相対的なオフセット距離をピクセル単位で表します。 x 軸と y 軸に 30 ピクセルをシフトします。これは、逆オフセットを示す負の値にすることができます。負の値を許可すると、要素は反時計回りに回転します。単位は角度 (度)、フォームは時計回りに 30 度回転し、負の値は反時計回りの選択を示します。 scale() はスケーリング関数を定義します。指定された幅 (X 軸) と高さ (Y 軸) のパラメーターに従って、要素はスケーリングされます。単位は倍数です。形式はスケール (2,2) であることを意味します。要素は元のサイズに応じて x 軸と y 軸で 2 倍に拡大されます。これは、回転を示す負の数にすることができます。

skew() は、次に従って反転されます。指定された (X 軸、Y 軸) パラメータ。単位は角度 deg、形式は skew(30px,30px) で、軸の y 軸方向が 30 度偏向されることを示します。 ; 逆偏向を示す負の数値にすることもできます。注: 定義された遠近感 (遠近効果) はなく、予期される偏向効果もありません。
例:

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>演示2D转换</title>
        <style type="text/css">
            #fr{
                width: 500px;
                height: 400px;
                border: 1px solid green;
                margin: 20px auto;
                overflow: hidden;
            }
            .ch{
                width: 80px;
                height: 80px;
                border: 1px solid black;
                margin: 10px;
                
            }
            #fr p:first-child{
                transform: translate(100px,0px);
                -moz-transform: translate(100px,0px);
                -webkit-transform: translate(100px,0px);
                -o-transform: translate(100px,0px);
                -ms-transform: translate(100px,0px);
                
            }
            #fr p:nth-child(2){
                background-color: gray;
                transform: rotate(30deg);
                -webkit-transform: rotate(30deg);
            }
            #fr p:nth-child(3){
                background-color: greenyellow;
                transform: scale(1.5,1.5) translate(100px)            }
            #fr p:last-child{
                transform:  skew(30deg,20deg);
                background-color: springgreen;
            }
        </style>
    </head>
    <body>
        <p id="fr">
            <p class="ch"></p>
            <p class="ch"></p>
            <p class="ch"></p>
            <p class="ch"></p>
                
            </p>
        </p>
    </body></html>

ログイン後にコピー

ブラウザ解析ページ:

最初の長方形 p、元の位置 (X 軸) に対して 100 ピクセル移動しました。
2 番目の長方形 p、その中心に対して相対的です。 30 度回転します。
3 番目の長方形 p は、元の位置に対して 100 ピクセル移動され、x 軸と y 軸に沿って 1.5 倍に拡大されます。
4 番目の長方形 p は、x 軸上にあります。 -軸の方向はそれぞれ 30 度、20 度反転されています。

rotation

Form:transform-origin:20% 40% (括弧や「,」区切りがないことに注意してください) ; は相対的な偏向位置を示します。前の位置に従って、x 軸および y 軸に沿って 20% および 40% 移動します。 w3c ページはそれを非常によく示しています

デフォルトの位置は、要素の中心に従って回転します。これがデフォルトの位置です

% 50%;要素のパラメータを使用するには、transform-origin: 0% 0%、transform-origin: 100% 100% などを使用することもできます。 ; 定義します。

ブラウザの互換性の問題: 新しいバージョンのブラウザは、transform で定義された 2D 変換をサポートしているようです。古いバージョンのブラウザとの互換性の問題を防ぐために (Chrome と Safari には接頭辞 -webkit- が必要です)、ブラウザはサポートしているようです。なぜなら、Web サイト訪問者が使用しているブラウザが何年のものであるかは決して分からないからです。

ie ブラウザ: -ms-transform:

chrome および Safari ブラウザ: -webkit-transform:

Opera ブラウザ: -o-transform:

Firefox ブラウザ: -moz-transform:

以上がCSSでの2D変換についてのまとめ共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。