DW中的变形与位移

最新推荐文章于 2022-07-01 22:57:47 发布

WENROUbalance

最新推荐文章于 2022-07-01 22:57:47 发布

阅读量1k

点赞数

分类专栏： DW 文章标签：前端

本文链接：https://blog.csdn.net/WENROUbalance/article/details/119980374

版权

本文介绍了CSS中的变形方法，包括translate的三种用法：translate(X,Y)、translateX(X)和translateY(Y)，以及matrix的使用，它通过2D变换矩阵实现元素定位。此外，还讨论了transform-origin属性，用于改变元素变形的中心点，以实现更灵活的布局效果。" 80015812,2300319,Kafka新消费者详解与实战,"['Kafka', '消费者', '消息队列', '数据处理']

摘要由CSDN通过智能技术生成

变形—位移
translate（）函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate（）函数，可以把元素从原来的位置移动，而不影响在X、Y轴上任何web组件。
translate我们分为三种情况：
1. translate（X,Y）水平方向或垂直方向同时移动（也就是X轴和Y轴同时移动）
2. translateX（X）仅水平方向移动（X轴移动）
3. translateY（Y）仅垂直方向移动（Y轴移动）
用法：transform:translate(20x,40x);
效果：

变形—矩阵matrix（）
matrix（）：是一个含六个值的（m11,m12, m21,m22,dx,dy）变换矩一个2D变换，相当于直接应用一个[m11,m12, m21,m22,dx,dy]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素，此属性值使用涉及到数学中的矩阵。
下列案例实现translate案例中的效果。
用法：transform:matrix(1,0,0,1,20,40);
效果：