変換はcss3の新しい属性ですか?-フロントエンドQ&A-php.cn

変換はcss3の新しい属性ですか?

青灯夜游

リリース： 2022-02-28 11:54:12

オリジナル

2127 人が閲覧しました

Transform は CSS3 の新しい属性です。要素の形状変更を設定し、要素の 2D または 3D 変換を実現するために使用されます。属性値と連動して要素を回転、傾斜、拡大縮小することができます (変換)関数)、スケール、移動、移動、および行列変形行列。

変換はcss3の新しい属性ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

Transformとは文字通り変形、つまり変化を意味し、要素の形状変化を設定したり要素の2Dや3D変形を実現するCSS3の新しい属性です。

CSS3 の Transform には主に次の種類があります: 回転、回転、歪み、スケーリング、スケール、モバイルの変換、および行列変換行列。

rotate 回転

指定された角度だけ要素を回転します。角度は正で時計回りです。設定値が正の数値の場合、回転は、設定値が負の場合、反時計回りを意味します。
例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: #000;
    }
   .box{
        width: 100px;
        height: 100px;
        border: 1px solid #fff;
        position: relative;
        top: 100px;
        left: 100px;

    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        transform:rotate(30deg);
    }
</style>
<body>
    <div>
        <div></div>
    </div>
   

</body>
</html>

ログイン後にコピー

効果:

変換はcss3の新しい属性ですか?

##スケールスケーリング # #scale には 3 つの状況があります。

要素を水平方向と垂直方向に同時に拡大縮小する
要素は水平方向のみスケーリングします (X 軸スケーリング)
要素はスケーリングのみを行います垂直方向 (Y 軸スケーリング)
```
.box{
	transfrom:scale(2,2)
}
.box{
	transfrom:scaleX(2)
}
.box{
	transfrom:scaleY(2)
}
```
ログイン後にコピー
レンダリング:

#モバイル翻訳変換はcss3の新しい属性ですか?

モバイル翻訳は 3 つに分かれていますタイプ状況:

水平方向と垂直方向に同時に移動します (つまり、X 軸と Y 軸が同じ位置で移動します)。同時に);
水平方向のみに移動 (X 軸の移動);

#translateY(Y)
##translate(x,y)

.box{
	transfrom：translate(100px,20px);
}

ログイン後にコピー

transform:translateX()

変換はcss3の新しい属性ですか?

.box{
        transform:translateX(100px);
    }

ログイン後にコピー

#transform:translateY()

.box{
		transform:translateY(100px);
}

ログイン後にコピー

変換はcss3の新しい属性ですか?
スキュー歪み

変換はcss3の新しい属性ですか?
スキューも 3 つの状況に分類されます##skew( x,y)

要素を水平方向と垂直方向に同時に歪めます (X 軸と Y 軸が同時に特定の角度値に従って歪められます);

#skewX(x)
要素を水平にするだけです方向の歪み (X 軸の歪み);

skewY(y)

要素を垂直方向にのみ歪みます (Y 軸の歪み)

.box{
		 transform:skew(20deg,20deg);
}
.box{
		 transform:skewX(20deg);
}
.box{
		 transform:skewY(20deg);
}

ログイン後にコピー

変換はcss3の新しい属性ですか? transform-origin(X ,Y)
: 要素の移動の基点(基準点)を設定します。デフォルトの点は要素の中心点です。 X と Y の値はパーセンテージ値、em、px にすることができ、X は文字パラメータ値 left、center、right にすることもできます。Y も X と同様に文字値 top、center を設定できます変換はcss3の新しい属性ですか?
(学習ビデオ共有: css ビデオチュートリアル
、Web フロントエンド入門チュートリアル)

以上が変換はcss3の新しい属性ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。