CSS変換の深い理解transform(2d)_html/css_WEB-ITnose

× カタログ [1] 変形元 [2] 変形関数 [3] 多値

前の単語

CSS変形transformは、主に移動、回転、拡大縮小、傾斜の4つの基本操作を中心とした効果の集合です。 、マトリックス行列を設定することで、より複雑な効果を実現することもできます。変換では、2D 効果と 3D 効果の両方を実現できます。 2D 変形に関係する属性には、主にトランスフォーム変形関数とトランスフォーム元の変形原点が含まれます。この記事では、変形transform2dの関連知識を詳しく紹介します。変形の全体的なプロセスをより明確に説明するために、この記事のデモでは CSS トランジションが多用されています。 CSSトランジションtransitionの詳細はこちら

変形原点(2D)

変形原点transform-originは、変形操作の基となる基点を指します。デフォルトでは、変換の原点は要素の中心点にあります。

transform-origin

値: x軸、y軸、z軸

初期値: 50% 50%

適用対象: 非インライン要素(block、inline-block、table、table-を含む)セルなど）

継承プロパティ：なし

【注意】IE9ブラウザはサポートしていません、safari3.1-8、android2.1-4.4.4、IOS3.2-8.4は全てプレフィックスを追加する必要があります、その他上位バージョンのブラウザでは標準的な記述を使用できます

2 次元の変換原点transform-origin は、x 軸と y 軸の値によって共同で決定されます (3 次元の状況に関係なく、z の値は-axis のデフォルトは 0)

x轴: left | center | right | <length> | <percentage>y轴: top | center | bottom | <length> | <percentage>

【1】キーワード

x轴left: 0%  center: 50%  right: 100%y轴top: 0%  center: 50%  bottom: 100%

//rotate() 回転関数を使用して、変形の原点を示します。 rotate(90deg) は、要素が時計回りに 90 度回転することを意味します

[2] Value

x 軸の値は、x 軸上の 0 点 (要素の境界線の外側の左上隅) からのオフセットを表します。 y 軸の値は、y 軸上の 0 点からのオフセットを表します

//rotate() 回転関数を使用して、変形の原点を示します。 rotate(90deg) は、要素が時計回りに 90 度回転することを意味します

【3】パーセント

X 軸のパーセンテージは、要素の幅と (幅 + 横方向のパディング + 横方向の境界線) に対する相対値であり、 Y 軸のパーセンテージは、要素の高さと (高さ + 垂直パディング + 垂直境界線) に相対します

// 変形の原点を示すには、rotate() 回転関数を使用します。 rotate(90deg) は、要素が時計回りに 90 度回転することを意味します

【4】単一の値

値が 1 つしかない場合、デフォルトの 2 番目の値は center です

//回転関数rotate() を使用して説明します変換の起源。回転(90deg)は要素が時計回りに90度回転することを意味します

変換関数(2次元)

変換transformは一連の変換関数の集合です

transform

値: none | +

初期値：なし

適用対象：非インライン要素（block、inline-block、table、table-cell等を含む）

継承：なし

<transform-function>: translate | scale | rotate | skew | matrix

【注意】複数変換はtransformに表示されます 関数はスペースで区切られています

【注意】変位、スケーリング、回転、傾きの4つの操作のうち、変位を除いて変形原点と関係がなく、他の3つは変形原点に関係します

行列

実際、変位、拡大縮小、回転、傾斜の 4 つの操作はすべて行列を通じて実装されます。

matrix(a,b,c,d,e,f)関数には、a,b,c,d,e,fの6つのパラメータがあります。また、x と y は変形前の要素の任意の点です。次の行列変換を通じて、対応する新しい座標 x' と y' が生成されます。

x' = ax + cy + e;y' = bx + dy + f;

デフォルトの a と d が 1、b, c, e, f が 0 であることが得られます。 a と d はスケーリングを制御し、0 にすることはできません; c と b は傾きを制御します; そして e と f は変位を制御します

変位

変位関数は、元の位置から指定された変位だけ要素を移動できます。変位を伴う 2D 関数には、translate()、translateX()、translateY() の 3 種類があります

【注意】要素を変位させると、要素の x 軸と y 軸も変化して移動します。要素が他の変更を受ける場合 変形操作は、変更された x 軸と y 軸に沿って変形する必要があります

translate(x[,y]?)

x は x 軸方向の要素の変位を表します。 yは要素のy軸方向の変位を表します )の変位はtranslate(0,y)に相当します

Yは要素のy軸方向の変位を表します

【注】変位関数は行列と等価です(1,0,0,1,x,y)

ディスプレイスメント関数 パーセントも受け付けます。このうち、x%は要素の横方向の幅の合計に対する相対値、y%は要素の縦方向の高さの合計に対する相対値です。 【注意】IE10にはバグがあります。要素のディスプレイスメント関数のパーセンテージは、要素の視覚的な幅と高さに相対的です (境界線ではありません)。

　　scale缩放函数可以让元素根据变形原点进行缩放，默认缩放值为1。涉及缩放的2d函数共3种，分别是scale()、scaleX()、scaleY()

　　[注意]当元素被缩放后，若元素要进行位移，数值类型的位移值要乘以该缩放比例；百分比类型的位移值乘以原来的宽度和或高度和转换成数值类型后，再乘以缩放比例

scale(x,[,y]?)

　　x表示元素在x轴方向上的缩放比例；y表示元素在y轴方向上的缩放比例

　　[注意]当y不存在时，相当于y=x

　　[注意]当x或y的值为负值时，元素先翻转再缩放

scaleX(x) 相当于 scale(x,1)

　　x表示元素在x轴方向上的缩放比例

scaleY(y) 相当于 scale(1,y)

　　y表示元素在y轴方向上的缩放比例

　　[注意]缩放函数相当于matrix(x,0,0,y,0,0)

倾斜

　　skew倾斜函数可以让元素以其变形原点围绕x轴和y轴进行一定角度的倾斜。涉及倾斜的2d函数共3种，分别是skew()、skewX()、skewY()

　　[注意]元素倾斜后，x轴和y轴发生倾斜，若元素要进行其他变形操作，则沿着倾斜后的x轴和y轴进行变形

skew(xdeg,[,ydeg]?)

　　x表示y轴向x轴倾斜的角度，y表示x轴向y轴倾斜的角度

　　[注意]当y不存在时，相当于y=0

　　[注意]x>0时，表示y轴向x轴正方向倾斜；x<0时，表示y轴向x轴负方向倾斜

　　[注意]y>0时，表示x轴向y轴正方向倾斜；y<0时，表示x轴向y轴负方向倾斜

skewX(x) 相当于 skew(x,0)

　　x表示y轴向x轴倾斜的角度

skewY(y) 相当于 skew(0,y)

　　y表示x轴向y轴倾斜的角度

　　[注意]倾斜函数相当于matrix(1,tany,tanx,1,0,0)

旋转

　　rotate旋转函数可以让元素通过指定的角度(deg)根据变形原点进行顺时针旋转，默认为0deg。与skew不同的是，rotate不会改变元素的形状。涉及到旋转的2d函数只有一个，就是rotate()

　　[注意]元素旋转后，元素的x轴和y轴也跟着发生旋转。若元素要进行其他变形操作，则沿着旋转后的x轴和y轴进行变形

rotate(Ndeg)

　　[注意]当N为正数时，元素进行顺时针旋转；当N为负数时，元素进行逆时针旋转

　　[注意]旋转函数相当于matrix(cosN,sinN,-sinN,cosN,0,0)

多值

　　transform变形可以接受多值，出现多个变形函数时用空格分隔，并且按照从前往后的顺序执行。

transform: <transform-function1> <transform-function2> <transform-function3>...

【1】多个变形函数的先后关系可以转换为多个元素的嵌套关系

<div style="transform:rotate(45deg) translateX(100px)"></div>相当于<div style="transform:rotate(45deg)">  <div style="transform:translateX(100px)"></div></div>

.box{  width: 100px;} .in{  background-color: pink;  height: 100px;}.out{  background-color: lightblue;  height: 100px;}

<div class="box">    <div class="out" style="-webkit-transform:rotate(45deg) translateX(100px);transform:rotate(45deg) translateX(100px);"></div>    <div style="-webkit-transform:rotate(45deg);transform:rotate(45deg)">      <div class="in" style="-webkit-transform:translateX(100px);transform:translateX(100px)"></div>    </div>    </div>

【2】变形transform中的多个变形函数的执行顺序是从前向后依次执行

//第一种情况:旋转45deg后，元素的x轴正向变成右下45deg，所以元素接下来的位移向这个方向移动//第二种情况:元素向右移动100px后，元素的原点跟着元素一起平移，并一直在元素的中心位置，所以元素接下来的旋转是原地旋转