第七章 变形 trnasform

第七章 变形 trnasform

旋转 rotate

div {transform:rotate(45deg)};

值：角度 如 20deg 44deg

表示相对于原点旋转，正值顺时针旋转，负值逆时针旋转。

扭曲 skew

div {transform:skew(20px,30px);}

skew(x,y)：元素在X和Y轴上同时扭曲，如果只有一个值，只应用在X轴上。

skewX(x)，skewY(y)：元素在X轴或Y轴上扭曲。

与rotate的区别在于只是倾斜，不扭曲

缩放 scale

div{transform:scale(1.2, 2,2);}

值：0.001-> 大于1表示放大，小于1表示缩小

scale(x,y)：表示在水平和垂直方向都缩放，如果只有一个值，表示水平和垂直方向都使用相同的值。

scaleX(x), scaleY(y)：仅在水平或者垂直方向缩放。

位移 translate

div{transform:translate(12px, 23px);}

类似于relative定位，即将元素以原有位置为基础移动，但不影响X轴和Y轴上的任何web组建

值：可以是绝对长度，也可以是百分数（相对于谁？）

translate(x,y)：水平和垂直方向同时位移，如果只有一个值，仅应用在X轴上。

translateX(x)，translateY(y)：仅在水平和垂直方向上位移

原点 tranform-origin

div{tranform-origin: left top;}

任何元素都有一个中心点，即x和y轴相交的正中心，

旋转，扭曲，缩放和位移都是相对于这个中心点，

可通过改变tranform-origin的值，实现这个原点的变化。

值：

关键字：top right bottom left

百分数：相对于元素的高度和宽度

如果只有一个值，另一个值默认为center

top left     0 0

top right    0 100%

bottom left  100% 0

bottom right 100% 100%