ホームページ > 記事 > ウェブフロントエンド > CSS変換の深い理解transform(2d)_html/css_WEB-ITnose
× カタログ [1] 変形元 [2] 変形関数 [3] 多値
CSS変形transformは、主に移動、回転、拡大縮小、傾斜の4つの基本操作を中心とした効果の集合です。 、マトリックス行列を設定することで、より複雑な効果を実現することもできます。変換では、2D 効果と 3D 効果の両方を実現できます。 2D 変形に関係する属性には、主にトランスフォーム変形関数とトランスフォーム元の変形原点が含まれます。この記事では、変形transform2dの関連知識を詳しく紹介します。変形の全体的なプロセスをより明確に説明するために、この記事のデモでは CSS トランジションが多用されています。 CSSトランジションtransitionの詳細はこちら
変形原点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度回転することを意味します
変換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轴正方向倾斜;xce7485864bf55d7b6044558df59bfdf80时,表示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后,元素的原点跟着元素一起平移,并一直在元素的中心位置,所以元素接下来的旋转是原地旋转