CSS における変換とは何を意味しますか?

CSS において、transform とは変化や変形を意味し、主に要素の形状変更の設定や要素の 2D または 3D 変換を実現するために使用され、この属性は属性値 (変換関数) と組み合わせて使用​​できます。 ) を使用して要素を変換します。回転、回転、歪み、スケーリング、移動、移動、およびマトリックス変形マトリックスを実行します。

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

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

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

文法:

transform: none|transform-functions;即：transform: rotate | scale | skew | translate |matrix;

none は変換がないことを意味し、transform-functions は spaces

# で区切られた 1 つ以上の変換関数を意味します。

#1.回転rotate

1.rotate(angle): 指定された角度パラメータで元の要素を回転します。 2D 回転。

angleは回転角度(単位はdeg)で、設定値が正の場合は右回転、負の場合は左回転を意味します。

transform: rotate(45deg);  //顺时针旋转30度

注: 回転する場合、デフォルトでは要素の中心点が基点として使用されます。基点の位置を定義できます。変換元属性による回転

変換元属性: 回転の基点を定義します。

構文:

transform-origin: x-axis y-axis z-axis;

デフォルト値:

transform-origin: 50% 50% 0;

2D の場合、左上隅デフォルト要素の値は 0% 0% です。例: 右下隅を中心に 45 度回転

transform-origin: 100% 100%;transform: rotate(45deg);

2,rotate3d( x, y, z, angle ): 3D 回転を定義します

一般的には使用されません

3.rotateX(angle): X 軸に沿った 3D 回転を定義します

transform: rotateX(45deg);

4.rotateY(angle): Y 軸に沿った 3D 回転を定義します

transform:rotateY(45deg);

5.rotateZ(angle): Z 軸に沿った 3D 回転を定義します

次の例からわかるように、 Z 軸の方向はウィンドウの方向と垂直です。

transform:rotateZ(45deg);

# 2. 移動移動

1.translate(x, y): 2D モバイル変換を定義します。

xx は最初の遷移値パラメーター、y は 2 番目の遷移値パラメーター オプションです。指定しない場合、ty の値は 0 になります。つまり、translate(x,y) は、設定された x、y パラメータ値に従ってオブジェクトが平行移動されることを意味します。値が負の数の場合、オブジェクトは反対方向に移動します。その基点のデフォルトは要素の中心点、または変換原点に基づくこともできます。基点を変更します。

例:

transform:translate(50px,50px):

2.translate(x): 移動を指定します

例:

transform:translateX(50px):

##3.translate(y)

: Y軸方向A moveを指定例:

transform:translateY(50px):

4、translate3d(x, y, z)：定义3D移动转换

5、translateZ(z)：指定Z轴方向上的一个移动

三、缩放 scale

1、scale(x, y)：定义2D缩放转换。

X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。例如：

transform: scale(0.7, 0.3);

可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；例如：

transform-origin: 100% 100%;transform: scale(0.7, 0.3);

2、scaleX(x)：在X轴方向进行缩放转换

transform: scaleX(0.7)

3、scaleY(y)：在Y轴方向进行缩放转换

transform: scaleY(0.7)

4、scale3d：(x, y, z)：定义3D缩放转换

5、scaleZ(z)：在Z轴方向进行缩放转换

四、扭曲 skew

1、skew(x-angle, y-angle) ：定义沿着 X 和 Y 轴的 2D 倾斜转换。

skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。：

transform: skew(10deg,10deg);

同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。例如

transform-origin: 100% 100%;transform: skew(10deg,10deg);

2、skewX(angle)：定义沿着 X 轴的 2D 倾斜转换

transform: skewX(10deg);

3、skewY(angle)：定义沿着 Y轴的 2D 倾斜转换

transform: skewY(10deg);

注意：如果要实现3D效果，需要将transform-style属性设置为preserve-3d，即

transform-style: preserve-3d;

（学习视频分享：web前端）

以上がCSS における変換とは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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