《CSS3中2D转换》笔记

CSS3中2D转换
        转换：改变元素在页面上的 大小、位置、形状、角度 的一种方式
        两大种转换方式：2D 3D
                2D：X轴 和 Y轴
                3D：X轴 和 Y轴 和 Z轴

        1、基本转换效果
                属性：transform
                取值：1) none 默认值、无效果
                     2) 一个或多个转换函数，用空格隔开

        2、转换原点：元素围绕着一个点进行的操作
                属性：transform-origin
                取值：1) 两个值 x轴 y轴
                     2) 三个值 x轴 y轴 z轴
                        可以取 数值 % 关键字(x:left/center/right y:top/center/bottom)

        3、2D转换效果
                1) 位移：改变元素在页面上的位置
                        属性：transform
                        取值：a、translate(x)
                                 x取值为正，向右移动
                                 x取值为负，向左移动
                              b、translate(x,y)
                                 x同上
                                 y取值为正，向下移动
                                 y取值为负，向上移动
                              c、translateX(x)
                              d、translateY(y)

                2) 缩放：按照一定比例改变大小
                        属性：transform
                        取值：a、scale(value)
                                 value表示X和Y的缩放倍率
                              b、scale(x,y)
                              c、scaleX(x)
                              d、scaleY(y)
                        x、y取值默认值都为1 放大：大于1的值 缩小：0-1之间的值
                        注意：如果取值小于0，会按照绝对值的倍率进行缩放，并且会产生水平/垂直翻转（镜像）

                3) 旋转：改变元素在页面上的角度
                        属性：transform
                        取值：rotate(ndeg)
                                n取值为正，顺时针旋转
                                n取值为负，逆时针旋转
                        注意：a、转换原点会影响旋转效果
                              b、旋转操作的同时，连同坐标轴一起转

                4) 倾斜：改变元素在页面当中的形状
                        属性：transform
                        取值：a、skewX(ndeg)
                                x轴方向倾斜，改变的是y轴的度数
                                n取值为正，y顺时针倾斜
                                n取值为负，y逆时针倾斜
                              b、skewY(ndeg)
                              c、skew(x)
                              d、skew(x,y)

 

参考：《Web前端开发之JavaScript(Js)精英课堂【渡一教育】》——《CSS3中2D转换【渡一微课】》