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.回転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):
: 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轴方向进行缩放转换
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 サイトの他の関連記事を参照してください。
![あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
