transfrom样式解析

transform样式解析

一、transflom:translate(平移变换)

    1、语法:transflom:translate(x,y) translateX() 
        translateY();要注意不要定义多transflow:translate
        值，平移可以接受多个值写法。
    2、利用transform还可以使元素垂直居中，这种垂直居中是一
    种
    优秀的写法如下代码:
        1、给父级相对定位
        2、给需要剧中的元素绝对定位
        3、top：50%；
        4、left：50%；
        5、transfrom:translate(-50%,-50%)
    3、transfrom:translate()几乎与相对定位概念一致当时还是
    有
    本质的区别。

二、transform:rotate(旋转变换）

    1、语法:transfrom:rotate(*deg度数 *rad弧度 1rad约等于
    57.3度 *turn圈)
    2、默认是以元素的中心旋转，元素设置transfrom:rotate;之
    后，里面的所有属性都会随之旋转。
    3、也可以设置值transform:rotateX() rotateX();这是以
    css中的轴开始旋转。

三、transform:scale(缩放变换)

    1、语法:tarsform:scale(x y) 只写一个值第二个值默认跟第
    一个值一样。
        1、>1倍数放大
        2、0~1倍数缩小
        3、<-1倒置倍数放大
        4、0~-1倒置倍数缩小

四、transform:skew(倾斜变换)

    1、语法:transform:skew(x y),只写一个值时第一个值默认时
    x轴方向

五、transform-origin(变换基点)

    1、语法:transform-origin:x y;(注意！没有括号)关键字
    (center top bottom left right)
    2、只写一个值时第二个值默认是center
    3、百分比值时是以自身元素百分比值
    

---

注意!

    
    在书写tansform的时候要注意先后顺序，一般平移的要写在最
    前面因为其他变换在变换过程中自身在数轴会发生改变，所以如
    果不规范写的话会导致效果失效