继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

largeQ
关注TA
已关注
手记 990
粉丝 92
获赞 585

一: 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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP