2D变换的知识点

2D变化（位移、缩放、旋转、扭曲、多重变换、变换原点）

1.2D位移

2D 位移可以改变元素的位置，具体使用方式如下:

先给元素添加转换属性 transform

编写 transform 的具体值，相关可选值如下:

translateX 设置水平方向位移，需指定长度值;若指定的是百分比，是参考自身宽度的百分比.

translateY 设置垂直方向位移，需指定长度值;若指定的是百分比，是参考自身高度的百分比。

translate  一个值代表水平方向，两个值代表: 水平和垂直方向。

3.注意点

1、位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。

2、与相对定位的区别: 相对定位的百分比值，参考的是其父元素，定位的百分比值，参考的是其自身。相对定位可以让一个元素变成另外一个元素的包含块

3、浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。

transform 可以链式编写，例如:，

transform: translateX(38px)   translateY(48px);

位移对行内元素无效

6、位移配合定位，可实现元素水平垂直居中

position : absolute:        //必须要开启绝对定位

left: 50%;

top: 50%;

transform: translate(-50%，-50%);

transform:translateX(30px) translateY(30px);  X和Y方向上的唯一都会显示

transform:translateX(30px);

transform:translateY(30px);   //分开写的话，写在下面的会把写在上面的覆盖掉

下面的translateY会把translateX覆盖掉，就只有translateY没有translateX了

水平垂直居中的方法二：

inner2 (

width: 60px;

height:60px;

background-color:orange;

position: absolute;   //必须要开启绝对定位

top: 50%;

left: 50%;

margin-left:-30px;

margin-top:-30px;

2D缩放

缩放是指:让元素放大或缩小，具体使用方式如下

1先给元素添加转换属性 transform

2编写transform 的具体值，相关可选值如下:

缩放不对行内元素起作用

缩放的书写方式和平移一样

店

scaleX   设置水平方向的缩放比例，值为一个数字，1 表示不缩放，大于 1 放大，小于 1 缩小

scaleY   设置垂直方向的缩放比例，值为一个数字，1 表示不缩放，大于 1 放大，小于1 缩小

scale

同时设置水平方向、重直方向的缩放比例

一个值代表同时设置水平和垂直缩放;两个值分别代表:水平缩放、垂直缩放。

注意点:

scale 的值，是支持写负数的，但几乎不用，因为容易让人产生误解.如果值是负数，会发生镜像翻转，本来是靠近左边的整正常的图像，会变成靠近右边的镜像翻转的图像。

借助缩放，可以实现小于12px的文字

translate  一个值代表水平方向，两个值代表: 水平和垂直方向。

2D旋转  rotate

transform：rotate(30deg)    rotate写一个值的时候，默认是rotateZ

2D 旋转是指:让元素在二维平面内，顺时针旋转或逆时针旋转。

具体使用方式如下:

1先给元素添加转换属性 transform

2编写 transform 的具体值，相关可选值如下:

rotate     设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针。

注意: rotateZ(20deg) 相当于 rotate(20deg)，当然到了3D变换的时候，还能写: rotate(x,x,x)

4.2D扭曲(了解)

2D 扭曲是指: 让元素在二维平面内被“拉扯”，进而“走形”实际开发几乎不用，了解即可，具体使用方式如下:

1，先给元素添加转换属性 transform

2、编写 transform 的具体值，相关可选值如下:

skewX    设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯。

skewY    设置元素在垂直方向扭曲，值为角度值，会将元索的左上角、右下角 拉扯。

skew     一个值代表 skewX，两个值分别代表: skewX 、 skewY

多重变换

transform:translate(100px,100px)  scale(0.5);

transform:translate(100px,100px)  rotate(30deg);

transform:rotate(30deg)   translate(100px,100px);

//顺序不一样，导致最后旋转的中心点不一样

多重变换

多个变换，可以同时使用一个transform 来编写。

transform:translate(-50%，-50%) rotate(45deg);

注意点:多重变换时，建议最后旋转。

变换原点

位移一直是相对于坐标远点移动的。

元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。

修改变换原点对位移没有影响，对旋转和缩放会产生影响。

如果提供两个值，第一个用于横坐标，第二个用于纵坐标。

如果只提供一个，若是像素值，表示横坐标，纵坐标取 50%;

若是关键词，则另一个坐标取 50%

transform-origin:50%  50%;表示转换的原点位于元素中心。具体来说，第一个50%表示原点位于元素水平中线，第二个50%表示原点位于元素垂直中线。例如，当你对一个元素应用旋转转换时，该元素会围绕其中心点旋转。

如果是位移的话，百分比是相对于元素自身的百分比。

transform-origin: left  top ，变换原点在元察的左上角。

transform-origin: 50px 50px ，变换原点距离元素左上角 50px 50px 的位置

transform-origin: 0，只写一个值的时候，第二个值默认为 50%。

变换原点的属性值可以写（关键字，像素值，百分比）。

变换原点的位置对旋转、缩放有影响，对位移没有影响

可以通过关键字、像素值、百分比来调整变换原点

transform-origin:top;   //只给一个值

transform-origin:right top; //给两个值