1.改变变形元素中心位置

  语法:

transform-origin:left|right|center top|center|bottom;

  2.变形综合

  将多种变形综合在一起时,顺序不一样,效果有可能不一样

  eg:

transform:rotate(360deg)scale(1.5);

transform:scale(1.5)rotate(360deg);

  顺序改变,效果不变

  eg:

transform:translateX(100px)rotate(360deg);

transform:rotate(360deg)translateX(100px);

  顺序改变,效果不一样

  3.设置元素是2d变形还是3d变形

  语法:

transform-style:flat(2d变形)|preserve-3d(3d变形);

  4.设置透视,井深(即3d效果的强度)

  语法:

  perspective:数值+单位;

  eg:给父元素添加同一的透视值

父元素{

perspective:1500px;

}

  eg:还可以单独给某一个子元素设置透视值

子元素{

transform:perspective(500px)rotateY(30deg);

}