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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

黄舟

Aug 11, 2017 pm 01:25 PM

css共有

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

要素の基点の位置を変更するには、transform-origin 関数を使用して定義できます。

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

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

左上隅を中心に回転したい場合は、 50

% 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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

非常に多くの色のリンクApr 13, 2025 am 11:36 AM

最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。

FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AM

ロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました

動く虹色の下線Apr 13, 2025 am 11:27 AM

サンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません

新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう

リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AM

ページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています

Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AM

Reactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。（「正しいと感じる」までファイルを移動するだけです笑）。真実

非アクティブユーザーの検出Apr 13, 2025 am 11:08 AM

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、

See all articles

ホットAIツール

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。