2018-04-29 关于CSS3-2D,3D转换

一： 2D:

x

      -

    -

    -

    -

-----------------------------------------------------         y

transform:

变换方法:  translate() 定义移动的位置。

值 :       rotate()      顺时针旋转。负数时逆时针旋转

       scale()

       skew()

       matrix()

translate(x,y) 该方法根据左(x)轴和顶部(y)轴给定的参数,从当前位置移动

示例: transform: translate(100px,100px);

rotate(deg) 顺时针旋转

示例: transform:rotate(30deg); 顺时针旋转30度

scale() 该方法增加或减少的大小,取决于宽度X轴和高度Y轴的参数

示例: transform:scale(1,2)      元素转变宽度为原来大小的1倍,原始大小的2倍。

skew(Xdeg,Ydeg)    斜拉    尽量少用(暂时不理解)

skewX(deg) 表示只在X轴( 水平方向 )  旋转  ！   注意:是水平方向,当旋转到90度时消失

skewY(deg) 表示只在Y轴( 垂直方向 )  旋转  ！   注意:是垂直方向,当旋转到90度时消失

matrix(6个属性)

transform: matrix(与我无关, 哪位, 怎么不去高考, 打麻将去吧, 水平偏移距离, 垂直偏移距离);

你只要关心后面两个参数就可以了，至于前面4个参数，是牛是马，是男是女都没有关系的。

作者：啾咪啾咪啾
链接：https://www.jianshu.com/p/0765dac63c74