CSS3-Transform_html/css_WEB-ITnose

Transform-Transform

CSS3 2D Transform

translate() //移动rotate() //旋转scale() //缩放skew()  //扭曲matrix()  //矩阵变形

translate() Move: x-DisでHTML要素を移動配置は、影響を与えることなく y 軸平面上で行われます。他の要素

translate(x,y) は水平方向と垂直方向に同時に移動します (つまり、X 軸と Y 軸が同時に移動します)

translateX(x) は水平方向のみ移動します (X 軸は移動します)

translationY(y) 垂直方向のみ 方向移動(Y軸移動)

例:

-webkit-transform: translate(20px,20px); /*Webkit内核浏览器：Safari and Chrome*/-moz-transform: translate(20px,20px);  /*Mozilla内核浏览器*/-o-transform: translate(20px,20px);  /*Opera*/-ms-transform:translate(20px,20px);  /*IE9*/transform: translate(20px,20px);  /*W3C标准*/

rotate() 回転

最初にtransform-origin属性の定義が必要です。変換原点は回転の基点を定義します

設定値が正の数値の場合は時計回りを意味し、設定値が負の数値の場合は反時計回りの回転を意味します。

例:

transform:rotate(30deg)；

scale() スケーリング

scale(x,y) は、要素を水平方向と垂直方向に同時にスケールします (つまり、X 軸と Y 軸のスケールを、

scaleX(x) 要素 水平方向のみにスケーリングします (X 軸のスケーリング)

scaleY(y) 要素は垂直方向のみにスケーリングします (Y 軸のスケーリング)

ただし、スケーリングの中心は同じですpoint と Base であり、それらの中心点は要素の中心位置です

Scale Base は 1、その

値が 1 より大きい場合、要素は拡大されます 、それ以外の場合、その値が 1 より小さい場合、要素は拡大されます

のような軽減

transform:scale(1.5,1.3)

skew() 歪み、斜め変換

skew(x,y) により、要素は水平方向と垂直方向に同時に歪みます (X 軸とY 軸は同時に特定の角度値に従って歪められ、変形します)

skewX(x) は要素を水平方向にのみ歪めます (X 軸は歪められ、変形されます)

skewY(y ) 要素を垂直方向にのみ変形します (Y 軸の歪み)

例:

transform:skewX(30deg)

transform:skewY（10deg）

matrix() 行列変形

transform: matrix(a,b,c,d,tx,ty);

基本的に拡大縮小、傾斜、回転, 平行移動の効果は、行列によって実現されます。 tx と ty は変位を表します。行列メソッドの詳細については、こちらを参照してください: CSS3 変換における行列 (行列) を理解する

要素の基点を変更する。 transform-origin

transform-origin(X,Y): 要素の移動の基点(基準点)を設定するために使用されます。デフォルトの点は要素の中心点です。 X と Y の値はパーセンテージ値、em、px

X も文字パラメータ値 left、center、right にすることができます。Y も X と同様に文字値を top、center、bottom に設定できます。パーセンテージ値に加えて

変換ブラウザをサポート

IE9以下ではサポートされていません

CSS3 3D Transform

3D Transformは、2D Transformと比較して、X-Y平面のHTML要素にZ軸を追加します

;

translate3d(tx,ty,tz)：他定义了一个3D的位移方法，增加了z轴的偏移量translateZ(tz)：这个方法只在Z轴偏移，与translateX()和translateY()相似scale3d(sx,sy,sz)：在原有的scale方法上增加了z轴的参数scaleZ(sz)：同理，只放大z轴，与scaleX()和scaleY()类似rotate3d(rx,ry,rz)：将元素以给定参数的某一个轴方向旋转rotateX(angle)，rotateY(angle)和rotateZ(angle)：只按照某一个轴旋转，rotate3d(1,0,0,30deg)相当于rotateX(30deg)，其他类推。

要素の 3D 空間をアクティブにするには、

perspective

属性が必要です。

transform: perspective( 600px );perspective: 600px;

の書き方は、transform:perspective(600px) に適用されます。単一の要素で、各要素の 3D ビューを変換します

パースペクティブの書き方: 600px を親要素に記述する必要があり、その後、複数の子要素のパースペクティブから複数の子要素に対して 3D 変換が実行されます。同じ 3D 空間を共有します

遠近感のパラメータ値は、3D 効果の強度を決定します。要素からの距離と考えることができます。値が大きいほど表示距離が遠くなり、同じ回転値でも、値が小さいほど効果は弱くなり、距離が近づくほど 3D 効果が強くなります。

perspective-orgin

同様に、要素に対して 3D 変換を実行する場合、変換点は要素の中心点になります。他の位置を変換点として使用したい場合は、この属性を使用して調整できます。 ;

transform-style

このパラメータは親要素の 3D 空間を共有するために使用されます。 backface-visibility

backface-visibility プロパティは、コンテンツの裏側を非表示にするために使用できます。デフォルトでは、裏面が表示されます。つまり、変換されたコンテンツは反転後も表示されたままになります。ただし、backface-visibility が非表示に設定されている場合、回転後にコンテンツは非表示になります。

前面のみが表示されるようにしてください CSS3 3D 変換 詳細については、http://www.zhangxinxu.com/wordpress/ を参照してください。 2012/09/css3- 3d-transform-perspective-animate-transition/

参考文献:

http://www.w3cplus.com/content/css3-transform

http://beiyuu.com/css3 -アニメーション/ http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

http://www.ruanyifeng. com/blog/2014 /02/css_transition_and_animation.html

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/