transform的使用方法

 我来答
白露饮尘霜17
2022-07-07 · TA获得超过1.2万个赞
知道大有可为答主
回答量:6720
采纳率:100%
帮助的人:36.7万
展开全部

transform的含义是:改变,使…变形;转换

在排版当中去合理的使用transform会使我们的排版看起来高大上那么一点。
接下来给大家介绍一下这个神奇的小东西都有什么属性会有什么效果。

rotate:通过指定的角度参数对原元素指定一个效果。
如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg);

translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
如:transform:translate(100px,20px):

缩放scale和移动translate是有点相似的,也是有三种情况:下面我们具体来看看这三种情况具体使用方法:
注意:默认值是1,它的值放大是比1大,缩小比1小。
1、scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
如:transform:scale(2,1.5);

2、scaleX( n ) 定义 2D 缩放转换,改变元素的宽度。

如:transform:scaleX(2):

3、scaleY( n ) 定义 2D 缩放转换,改变元素的高度。

如:transform:scaleY(2):

1、skew( x-angle , y-angle ) 定义 2D 倾斜转换,沿着 X 和 Y 轴。

如:transform:skew(30deg,10deg);

2、skewX( angle ) 定义 2D 倾斜转换,沿着 X 轴。

如:transform:skewX(30deg);

3、skewY( angle ) 定义 2D 倾斜转换,沿着 Y 轴。

如:transform:skewY(10deg);

matrix(, , , , , ) : 以一个含六值的(a,b,c,d,e,f) 变换矩阵 的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵。
改变元素基点 tranform-origin

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式