您好,欢迎访问一九零五行业门户网

transform在CSS中是什么意思

在css中,transform的意思为改变、变形,主要用于设置元素的形状改变,实现元素的2d或3d转换;该属性可以配合属性值(转换函数)来对将元素进行旋转rotate、扭曲skew、缩放scale、移动translate以及矩阵变形matrix。
本教程操作环境:windows7系统、css3&&html5版、dell g3电脑。
transform字面上就是变形,改变的意思,是css3的新增属性,用来设置元素的形状改变,实现元素的2d或3d转换。
在css3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
语法:
transform: none|transform-functions;即:transform: rotate | scale | skew | translate |matrix;
其中none表示不变换,transform-functions表示一个或多个变换函数,以空格隔开
一、旋转 rotate
1、rotate(angle):通过指定的角度参数对原元素指定一个2d旋转。
angle是指旋转角度(单位为deg),如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
transform: rotate(45deg); //顺时针旋转30度
注意:旋转的时候默认以元素中心点为基点进行旋转,可以通过transform-origin属性定义旋转的基点位置
transform-origin属性:定义旋转的基点。
语法:
transform-origin: x-axis y-axis z-axis;
默认值:
transform-origin: 50% 50% 0;
2d的情况下,默认元素的左上角为0% 0%,例如:绕右下角旋转45度
transform-origin: 100% 100%;transform: rotate(45deg);
2、rotate3d(x, y, z, angle):定义3d旋转
不常用
3、rotatex(angle):定义沿着x轴的3d旋转
transform: rotatex(45deg);
4、rotatey(angle):定义沿着y轴的3d旋转
transform:rotatey(45deg);
5、rotatez(angle):定义沿着z轴的3d旋转
由以下的例子可以看出,z轴的方向是垂直于window的方向
transform:rotatez(45deg);
二、移动 translate
1、translate(x, y) :定义2d移动转化
x 是第一个过渡值参数,y 是第二个过渡值参数选项。如果未被提供,则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移,按照设定的x,y参数值,当值为负数时,反方向移动物体,其基点默认为元素中心点,也可以根据transform-origin进行改变基点。
例如:
transform:translate(50px,50px):
2、translate(x):指定x轴方向上的一个移动
例如:
transform:translatex(50px):
3、translate(y):指定y轴方向上的一个移动
例如:
transform:translatey(50px):
4、translate3d(x, y, z):定义3d移动转换
5、translatez(z):指定z轴方向上的一个移动
三、缩放 scale
1、scale(x, y):定义2d缩放转换。
x表示水平方向缩放的倍数,y表示垂直方向的缩放倍数,而y是一个可选参数,如果没有设置y值,则表示x,y两个方向的缩放倍数是一样的。并以x为准。例如:
transform: scale(0.7, 0.3);
可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;例如:
transform-origin: 100% 100%;transform: scale(0.7, 0.3);
2、scalex(x):在x轴方向进行缩放转换
transform: scalex(0.7)
3、scaley(y):在y轴方向进行缩放转换
transform: scaley(0.7)
4、scale3d:(x, y, z):定义3d缩放转换
5、scalez(z):在z轴方向进行缩放转换
四、扭曲 skew1、skew(x-angle, y-angle) :定义沿着 x 和 y 轴的 2d 倾斜转换。
skew是用来对元素进行扭曲变行,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数,如果没有设置第二个参数,那么y轴为0deg。:
transform: skew(10deg,10deg);
同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。例如
transform-origin: 100% 100%;transform: skew(10deg,10deg);
2、skewx(angle):定义沿着 x 轴的 2d 倾斜转换
transform: skewx(10deg);
3、skewy(angle):定义沿着 y轴的 2d 倾斜转换
transform: skewy(10deg);
注意:如果要实现3d效果,需要将transform-style属性设置为preserve-3d,即
transform-style: preserve-3d;
(学习视频分享:web前端)
以上就是transform在css中是什么意思的详细内容。
其它类似信息

推荐信息