前言:CSS3转换,可以移动、比例化、反过来、旋转和拉伸元素。
属性 | 变换方法 | 属性值 | 描述 |
transform(变换方法) | translate(位移,单位px) |
- translate(x,y) 沿着x轴正方向移动x距离 y轴正方向移动y距离
- translateX(n) 沿着x轴正方向移动n距离
- translateY(n) 沿着y轴正方向移动n距离
| |
scale(缩放,无单位) |
- scale(x,y) 更改元素的宽度和高度,将元素的宽度变为原来的x倍,将高度变为原来的y倍
- scaleX(n) 更改元素的宽度
- scaleY(n) 更改元素的高度
| |
rotate(旋转,单位为deg) |
- rotate(x) 围绕z轴旋转,只接受一个参数,并且这个是2d方面的旋转,但是和后面的3d旋转中的围绕z轴旋转有着本质区别
- rotateX(n) 围绕x轴旋转
- rotateY(n) 围绕y轴旋转
| |
skew(斜切,单位deg) |
- skew(x-angle,y-angle) 定义2d倾斜旋转 沿着x轴和y轴
- skewX(angle) 如果angle是正值,则沿着x轴正方向偏移斜切,负值则相反
- skewY(angle) 如果angle是正值,则沿着y轴正方向偏移斜切,负值则相反
|
- 网上大家都把skew叫做斜切,这么喊可能不容易理解,我习惯把它叫做拉伸。
- skewX(angel) 就是将元素以旋转基点为坐标原点沿着x轴方向拉伸一定角度
- skewY(angel) 就是将元素以旋转基点为坐标原点沿着y轴方向拉伸一定角度
|
matrix(矩阵) | 接收 6 个参数:a、b、c、d、e、f ![](https://i-blog.csdnimg.cn/blog_migrate/b62417eec27bfc27a63637bdf5b7c0c9.png) 其中,x 和 y 表示转换前矩阵偏移元素中心点的坐标;x' = ax + cy + e 和 y' = bx + dy + f 分别表示转换后的坐标。 | |
transform-origin(前面说的旋转基点) | 一般填写两个属性值 | left top left center left bottom right top right center right bottom center top center center center bottom | transform-origin属性是css变换的一个重要的属性,一般需要设置2个值:
- 第一个值为偏移x轴方向的距离,可以用关键字left|right|center或者百分比以及具体的距离值描述。
- 第二个值为偏移y轴方向的距离,可以用关键字top|bottom|center或者百分比以及具体的距离值描述。
- 第三个值为偏移z轴方向的距离,只能使用具体的距离值描述,这个值是使用在开启了3d模式下使用的,并且不怎么常用,第三个值默认值为0。
- Tips:当只设置一个值的时候,那就意味着第二个值默认为center,第三个值默认为0
|
一直在路上,自律,坚持