一真的小站

鳶飛魚躍,無處不是化境。

0%

二十一、二维变换

二十一、二维变换

通过CSS3 transform转换,我们能够对元素进行移动、缩放、旋转、斜切等操作。

移动:translate()

使用translate()函数,你可以把元素从原来的位置移动。移动参照元素左上角原点

a)语法:translate(tx)I translate(tx,ty)

b)tx是一个代表X轴(横坐标)移动的向量长度,当其值为正值时,元素向X轴右方向移动,反之其值为负值时,元素向X轴左方向移动。

c)ty是一个代表Y轴(纵向标)移动的向量长度,当其值为正值时,元素向Y轴下方向移动,反之其值为负值时,元素向Y轴上方向移动。
如果ty没有显式设置时,相当于ty=0。

d)也可以使用translatex(tx)或者translateY(ty)

样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head>
<style>
* {
padding: 0;
margin: 0;
}

div {
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
/*添加过渡效果css样式名称耗时*/
transition: transform 2s;
}

div:active {
/*使用transform实现元素的移动
a.移动是参照元素的左上角
b.执行完毕之后会恢复到原始状态
1.如果只有一个参数就代表×方向
2.如果有两个参数就代表x/y方向*/
transform: translate(100px, 100px);
/*添加水平或者垂直方向的移动*/
/* transform: translateX(300px); */
/* transform: translateY(300px); */
}
</style>
</head>

缩放:scale()

样例

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<style>
div:nth-of-type(2):active {
/*实现缩放 1指不缩放,>1放大;<1缩小;参照元素的几何中心放大
1.如果只有一个参数,就代表x和y方向都进行相等比例的缩放
2.如果有两个参数,就代表x/y方向*/
transform: scale(2, 1);
/*缩放指定的方向*/
/* transform:scaleX(0.5); */
/* transform: scaleY(0.5); */
}
</style>
</head>

旋转:rotate()

旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作,接受一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转

a)语法:

rotate(a):

b)a:代表的是一个旋转的角度值。其取值可以是正的,也可以是负的。
如果取值为正值时,元素默认之下相对元素中心点顺时针旋转;如果取值为负值时,元素默认之下相对元素中心点逆时针旋转

样式:

1
2
3
4
5
6
7
<head>
<style>
div:nth-of-type(3):active {
transform: rotate(300deg);
}
</style>
</head>

斜切:skew()

2D斜切:skew():能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状
a)语法:

skew(ax) I skew(ax,ay)

b)ax:用来指定元素水平方向(X轴方向)倾斜的角度。
c)ay:用来指定元素垂直方向(Y轴方向)倾斜的角度。如果未显式的设置这个值,其默认为0。
d)也可以使用skewx(sx)或者skewY(sy)

同时添加多个transform属性值

用空格分割,例:

transform:translateX(700px) rotate(-90deg);