第七章 变形 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%