cssday05

1.css 转换属性
    属性 transform
    取值 转换函数,如果出现多个转换函数,使用空格隔开
2.转换原点
    属性 transform-origin
    取值
        1.关键字 top / bottom / left / right / center
        2.使用px 或者 % 指定转换原点
        3.默认转换原点在元素的中心位置
3.转换函数
    1.平移转换
        1.转换函数 translate()
        2.取值
            1.translate(x) 元素沿水平方向进行移动
              等价于 translateX()
            2.translate(x,y) 元素沿水平方向移动x,沿垂直方向移动y
            3.元素沿垂直方向平移
                translateY()
    2.缩放
        1.根据比例改变元素大小
        2.语法
            1.转换函数 scale(x) 表示元素x轴和y轴都按照指定比例缩放
            2.scaleX(x) 
                表示原始尺寸取值为无单位的数字,默认值是1,表示原始尺寸,元素沿x轴缩放
                    取值 >1 元素放大的比例
                    取值在0-1之间,元素会按照比例缩小
                    取值为负值,元素会反转
            3.scaleY(x) 元素沿Y轴缩放
        3.旋转
            1.改变元素在文档中的显示角度
            2.属性 rotate(ndeg) 
            3.取值为带角度单位的数值,eg:45deg
                取值为正 表示顺时针旋转
                取值为负 表示逆时针旋转
            4.注意:
                1.转换原点一旦改变,会影响转换效果
                2.旋转操作会连带坐标轴一起旋转,会影响其后其他的转换操作

                transform-origin:left bottom 以左下角为旋转原点
                transform:rotate(45deg); 旋转45° 

猜你喜欢

转载自blog.csdn.net/zh__quan/article/details/81535827
05
今日推荐