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();
posted @ 2020-04-21 21:53  寒泉陌上心  阅读(141)  评论(0)    收藏  举报