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个参数,是牛是马,是男是女都没有关系的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭...
    hzrWeber阅读 22,185评论 0 19
  • 关于css3变形 CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都被称作为变形函数(Tra...
    hopevow阅读 6,410评论 2 13
  • CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍...
    BULL_DEBUG阅读 911评论 0 1
  • 知识点:CSS3 TransformCSS3 2D转换CSS3 3D转换CSS3 Transform与坐标系统CS...
    越IT阅读 518评论 0 0
  • 我是个处女座的人 在思想上,生活上,都是洁癖 赖先生是个嘴巴特别能说,幽默风趣,谈吐自然的男人。更可以说是个不折不...
    帅妹_32582阅读 284评论 0 1