CSS 3 3D 转换

发布时间:2019-07-25 09:19:55编辑:auto阅读(1441)

    3D转换时,要赋予改变元素的父元素 perspective 属性


    perspective: m px; // 视点和画面的距离,视点的位置默认在父元素的中心


    perspective-origin:right top;//改变视点的位置


    transform-orgin:   // 


    backface-visibility: hidden / visible(默认)

    ========================================================================================

    使用 transform 属性将 HTML 元素在三维空间内


    1.旋转 rotate

           rotateX(角度)

           rotateY(角度)

           rotateZ(角度)

           rotate3d(x,y,z,角度) //


    2.移动 translate

    translateX(长度)

    translateY(长度)

    translateZ(长度)

    translate3d(x,y,z,角度)


    3.缩放 scale

    scaleX(x)

    scaleY(y)

    scaleZ(z)

    scale3d(x,y,z)


    ==================================================================================

    transform-style: flat //默认,子元素将不保留其3D位置

    preserve-3d; //子元素将保留其3D位置


关键字