首页 >> 探索

CSS 2D 转换变形的挪动的终局

  • 探索
  • 2026-09-05 16:14:15
  • 点击次数:6248

CSS 2D 转换可以完成 ,转换终局位移、变形改削 、挪动缩放等终局


挪动: translate

改削: rotate

缩放: scale

二维坐标系


2D转换是转换终局改削标签在二维立体上的职位和外形的一种技能,先来进修二维坐标系



(1)变形的变形挪动的终局


div {

    width: 300px;

    height: 300px;

    background-color: pink;transform: translateX(100px);

    transform: translate(100px, 100px);

}


/*transform: translate(x, y);*/

/*写法一*/

transform: translate(10px, 0);


/*写法二*/

transform: translateX(100px);


/*写法三*/

transform: translateY(100px);



重点

1. 定义2D转换中的挪动  ,沿着X和Y轴挪动元素

2. translate最除夜的挪动益处∶不会影响到其他元素的职位

3. translate中的百分比单位是绝对本身元素的translate:(50%,50%)

4. 对行内标签没有终局

本文由作文网探索栏目发布,感谢您对作文网的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“CSS 2D 转换变形的挪动的终局