目录
介绍
css3的transform属性允许我们对元素进行旋转,缩放,移动或者倾斜,对元素应用2D或3D的转换。
transform属性的基础语法如下:
transform:none | transform-functions;
在上述语法中,transform属性的默认值是none,适用于内联元素和块元素,表示不会进行变形。transform-functions用于变形函数,可以是一个或是多个变形函数列表。
常用函数
函数名 | 描述 | 参数说明 |
rotate(angel) | 旋转元素 | angle是度数值,代表旋转角度 |
skew(x-angel,y-angel) | 倾斜元素 | angle是倾斜角度,代表倾斜角度 |
skewX(angel) | 沿x轴倾斜元素 | angle是倾斜角度,代表倾斜角度 |
skewY(angel) | 沿y轴倾斜元素 | angle是倾斜角度,代表倾斜角度 |
scale(x,y) | 缩放元素,改变元素的高度和宽度 | 代表缩放比例,取数包括正数,负数和小数 |
scaleX(x) | 改变元素宽度 | 代表缩放比例,取数包括正数,负数和小数 |
scaleY(y) | 改变元素高度 | 代表缩放比例,取数包括正数,负数和小数 |
translate(x,y) | 移动元素对象,基于x和y坐标重新定位元素 | 元素移动的数值,x代表左右方向,y代表上下方向,向左和向上用负。 |
translateX(x) | 沿着x轴移动元素 | 元素移动的数值 |
translateY(y) | 沿着y轴移动元素 | 元素移动的数值 |
matrix(n,n,n,n,n,n) | 2D转换矩阵 | 使用六个值的表示变形,所有变形的本质都是由矩阵完成的。 |
rotate代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
left: 500px;
top: 500px;
background: black;
/*transform代码使用*/
position: absolute;
transform: rotate(150deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
正常的
skew代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 500px;
top: 500px;
background: black;
transform: skew(10deg,0deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
正常的
skewX代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 500px;
top: 500px;
background: black;
transform: skewX(-30deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
正常的
skewY代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 500px;
top: 500px;
background: black;
transform: skewY(30deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
正常的
scanle代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 500px;
top: 500px;
background: black;
transform: scale(1,2);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
scaleX代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 500px;
top: 500px;
background: black;
transform: scaleX(2);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
scaleY代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 500px;
top: 500px;
background: black;
transform: scaleY(2);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
translate代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 0px;
top: 0px;
background: black;
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
正常的
translateX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 0px;
top: 0px;
background: black;
transform: translateX(100px);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
正常的
translateY代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 0px;
top: 0px;
background: black;
transform: translateY(100px);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
正常的
matrix代码
简单的解析:
matrix(a,b,c,d,e,f),算了太多了,我给链接给你们看吧
直接方便运用的:
https://www.jianshu.com/p/956d54376338https://www.jianshu.com/p/956d54376338
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
background: black;
/*这只是其中一种,就是保持x不变,y变大两倍*/
transform: matrix(1,0,0,2,0,0);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>