0
点赞
收藏
分享

微信扫一扫

前端 CSS 属性transform 平面转换 详解

可以通过设置css属性改变标签的移动位置,旋转,缩放比例,倾斜度数。

transform 是一个符合属性,一个标签的属性不可以出现两个transform。可以发他们的值写在一些。

移动的方向是:

水平左正,右负。

垂直方向,上负,下正。

首先显示transform 的属性都有那些

translateX(x):平移元素沿 x 轴

translateY(y):平移元素沿 y 轴

translate(x, y):平移元素沿 x 和 y 轴

scaleX(x):缩放元素沿 x 轴

scaleY(y):缩放元素沿 y 轴

scale(x, y):缩放元素沿 x 和 y 轴

rotate(angle):旋转元素一个角度

rotateX(angle):沿 x 轴旋转元素

rotateY(angle):沿 y 轴旋转元素

rotateZ(angle):沿 z 轴旋转元素

skewX(angle):倾斜元素沿 x 轴

skewY(angle):倾斜元素沿 y 轴

skew(angle);默认原点倾斜

1:translate 移动位置

用到的是

transform: translate(200px,100px);  表示向左移动200px,向下移动100px.

transform: translate(200px);也可以是一个值,表示向左移动200px.

transform: translate(100%); translate里的值也可以是百分比。

移动的距离是参考自身,如果自身宽度是200px,那么100%就是200px,同时高度也是同样的道理。

translateX() 表示的就是向水平方向可以作用移动。

translateY() 表示的是垂直方向移动。


举报

相关推荐

0 条评论