CSS3のtransform属性で実装される4つの機能（回転、拡大縮小、傾斜、移動）

不言

リリース： 2018-08-24 10:13:08

オリジナル

24273 人が閲覧しました

この記事はCSS3のtransform属性で実装される4つの機能(回転、拡大縮小、傾き、移動)について説明していますので、必要な方は参考にしていただければ幸いです。役に立ちました。

1transform属性

CSS3ではtransform関数を使用して、テキストや画像の回転、拡大縮小、傾き、移動の4種類の変形処理を実現できます。

(1) ブラウザのサポート

これまでのところ: Safari 3.1 以降、Chrome 8 以降、Firefox 4 以降、Opera 10 以降のブラウザがこの属性をサポートしています。

2 回転

回転メソッドを使用して、角度値の後に角度の単位を示す「度」のテキストを追加します。回転方向は時計回りです。

transform：rotate（45deg）；

ログイン後にコピー

3 ズーム

scaleメソッドを使用してテキストまたは画像のスケーリングを実装し、パラメータでスケーリング率を指定します。

transform：scale（0.5）；//缩小一半

ログイン後にコピー

(1) 要素の横倍率と縦倍率をそれぞれ指定できます

transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。

ログイン後にコピー

4 傾き

テキストや画像の傾き処理を実装するにはskewメソッドを使用し、パラメータで横方向を指定します。傾斜角と鉛直方向の傾斜角。

transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。

ログイン後にコピー

(1) パラメータを1つだけ使用し、他のパラメータを省略します

この場合、垂直方向には傾かず、水平方向のみに傾いているとみなされます。

transform：skew（30deg）；

ログイン後にコピー

5 移動

translateメソッドを使用してテキストや画像を移動し、パラメータで横方向の移動距離と縦方向の移動距離を指定します。

transform：translate（50px，50px）；// 水平方向上移动50px，垂直方向上移动50px

ログイン後にコピー

(1) パラメータを1つだけ使用し、他のパラメータを省略します

この場合、垂直方向には移動せず、水平方向のみに移動するとみなします。

transform：translate（50px）；

ログイン後にコピー

6 要素に複数の変換メソッドを使用します

transform：translate（150px，200px） rotate（45deg） scale（1.5）；

ログイン後にコピー

7 変換の基準点を指定します

変換メソッドを使用してテキストまたは画像を変換する場合、要素の中心点が基準点として使用されます変形。

変換元属性

このアトリビュートを使用すると、変形の基点を変更できます。

transform：rotate（45deg）；
transform-origin：left bottom；//把基准点修改为元素的左下角

ログイン後にコピー

(1) 属性値を指定します

要素の横方向の基準点の位置：left、center、right

要素の縦方向の基準点の位置：top、center 、下

8 3D変形機能

(1)回転

rotateXメソッド、rotateYメソッド、rotateZメソッドを使用してX軸、Y軸、Z軸を中心に要素を回転させます。角度値の後に角度の単位を示す deg テキストが続きます。回転方向は時計回りです。

transform：rotateX（45deg）；
transform：rotateY（45deg）；
transform：rotateZ（45deg）；
transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）；
transform：scale（0.5） rotateY（45deg） rotateZ（45deg）；

ログイン後にコピー

(2) スケーリング

scaleX メソッド、scaleY メソッド、scaleZ メソッドをそれぞれ使用して、X 軸、Y 軸、Z 軸に従って要素をスケーリングし、パラメーターでスケーリング率を指定します。

transform：scaleX（0.5）；
transform：scaleY（1）；
transform：scaleZ（2）；
transform：scaleX（0.5）scaleY（1）；
transform：scale（0.5） rotateY（45deg）；

ログイン後にコピー

(3)傾き

skewXメソッドとskewYメソッドをそれぞれ使用して、X軸とY軸上で要素を時計回りに傾け(skewZメソッドなし)、パラメータで傾きの角度を指定します

transform：skewX（45deg）；
transform：skewY（45deg）；

ログイン後にコピー

( 4) 移動

translateXメソッド、translateYメソッド、translateZメソッドをそれぞれ使用して要素をX軸、Y軸、Z軸方向に移動し、その移動距離をパラメータに加算します。

transform：translateX（50px）;
transform：translateY（50px）;
transform：translateZ（50px）;

ログイン後にコピー

9 変換行列

各変形方法の背後には、対応する行列があります。

(1) 2D変形を計算する(3 変形処理の実行方法を決定するために使用される数値。

(2) 平行移動2D行列 $begin{bmatrix} a&c&e \ b & d & f\ 0 & 0 &1 end{bmatrix}$

//效果一致：右移150px，下移150px
transform：matrix（1，0,0,1，150，150）；
transform：translate（150px，150px）；

ログイン後にコピー

(3) 3D変形計算

3Dスケーリング変形に使用する4X4行列 $begin{bmatrix} 1 & 0 & tx\ 0& 1& ty \ 0& 0& 1 end{bmatrix}$

$\begin{bmatrix} sx & 0 & 0&0 \\ 0& sy & 0&0 \\ 0& 0& sz & 0\\ 0& 0& 0&1 \end{bmatrix}$

transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);

//效果一致：X轴方向上缩小五分之一，Y轴方向上缩小一半。
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);

ログイン後にコピー

（4）可通过矩阵执行多重变形处理

将需要的变形矩阵相乘得到一个新的变形矩阵可实现该处理。