css-图形变换-transform(超级详细讲解)

1.translate:平移效果

translate(X or Y or Z)(?px):个人的理解就是在目标位置上实现沿着坐标轴三个方向移动,对于Z轴我们学数学也学到过对于立体图像才讨论,在于html当中,z轴方向是面向我们为正的,所以对于3D目标渲染才会看到效果变换.

3d复合写法:translate3d(?px,?px,?px)

2.scale:缩放效果

scale(X or Y or Z)(?):(?)内填写的?为倍数,大于1则是放大?倍,小于1则是缩小?倍.

对于scaleX(?)来说就像我画的坐标轴x是对于横向而言,对于渲染目标来说则是对于宽度进行渲染变换.

对于scaleY(?)则是对于高度进行渲染变换.,scaleZ(?)则是对于厚度进行渲染变换.

3.rotate:旋转效果->单位不是px而是deg(角度)

旋转效果注意和前两个效果进行区分,例如rotateX(?deg)是以X为轴进行旋转,例如    transform:rotateX(90deg);会出现渲染目标消失,所以一般3D目标下才会发现变换.rotateY(?deg)也如此.但是rotateZ(?deg)此时是围绕Z轴旋转,所以我们可以看到图像顺时针和逆时针旋转的变换.

 

4.skew:斜切效果->单位不是px而是deg(角度)

skewX和skewY注意分别是向水平和垂直两种方向,图上是skewX(-?deg)的效果,容易记忆就是skewX(+?deg往左推几度),skewX(-?deg往右推几度).