css的 transform 属性应用于元素的2D或3D转换。
使用这个属性可将元素进行旋转,缩放,移动,倾斜等操作。
例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform 转换</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width: 200px;
height: 100px;
margin: 100px 100px;
background: pink;
text-align: center;
}
.content:hover{
width: 300px;
}
</style>
</head>
<body>
<div class="content">transform 转换</div>
</body>
</html>
效果如下:
rotate
rotate():定义了元素的2D旋转转换;“deg”是“度”的意思,如“10deg”表示“10度”。
例如下面的例子,鼠标移上去之后:
transform: rotate(10deg);
-webkit-transform: rotate(10deg); /* Safari */
-moz-transform: rotate(10deg);
页面效果:
skew
skew():定义了元素沿着X轴和Y轴的2D倾斜转换;
.content:hover{
width: 300px;
transform: skew(10deg);
-webkit-transform: skew(10deg); /* Safari */
-moz-transform: skew(10deg);
}
页面效果:
scale
scale(x,y):定义了元素的 2D 缩放转换比例。
可以传2个值,括号里如果只写了一个值时,则表示xy都一样。“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负值。
.content:hover{
width: 300px;
transform: scale(2.0);
-webkit-transform: scale(2.0); /* Safari */
-moz-transform: scale(2.0);
}
页面效果:
translate
translate(x,y):定义了元素的2D位移变动;
向右或者向下移则值为正,向左向上位移则为负值。
下面的例子,元素向右和向上移动了:
.content:hover{
width: 300px;
transform: translate(50px,-50px);
-webkit-transform: translate(50px,-50px); /* Safari */
-moz-transform: translate(50px,-50px);
}
页面效果:
matrix
matrix(n,n,n,n,n,n) 定义 了元素的 2D 转换,使用六个值的矩阵。
.content:hover{
width: 300px;
transform: matrix(2,2,0,2,45,0);
-webkit-transform: matrix(2,2,0,2,45,0); /* Safari */
-moz-transform: transformmatrix(2,2,0,2,45,0);
}
页面效果: