当前位置：
CSS 2D 转换变形的移动的效果
时间:2026-06-07 01:43:41 出处:探索阅读（143）
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. 对行内标签没有效果
分享到：
上一篇： 过敏性鼻炎该怎么治?如何根治
温馨提示：以上内容和图片整理于网络，仅供参考，希望对您有帮助！如有侵权行为请联系删除！