HTML| 2D&3D

2D，3D

2D位移

transform:translate(x,y);
   transform:translateX(x轴移动的距离);
   transform:translateY(Y轴移动的距离);

2D的缩放

transform:scale(x,y);
  x，y 这两个参数为一个数字，大于1放大 小于1缩小
transform:scaleX();
transform:scaleY();

2D的旋转

transform:rotate(30deg);
    transform:rotateX(30deg);
    transform:rotateY(30deg);

2D倾斜

transform:skew(度数);
    指定x,y的倾斜
    transform:skewX(度数)
    transform:skewY(度数)

改变变形原点

transform-origin:x y;
属性值：
    left top
    10px 20px
    10% 20%
    center

目标伪类选择器

元素选择符:target{
      //当该元素被相关URL指向的时候，做样式的变换。
}

平面空间

transform-style:flat 

形成3d空间(让父元素形成3d空间、3d舞台)：
      transform-style:preserve-3D

3d位移

transform:translate3d(x,y,z);
transform:translateZ();

HTML| 2D&3D

原文：https://www.cnblogs.com/msx-hanquan/p/12748171.html