《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转换【渡一微课】》

展开阅读全文

没有更多推荐了,返回首页