2D转换:
在二维平面上的变化:
tranlate | 移动 |
rotate | 旋转 |
scale | 缩放 |
上面的变化都是基于二维坐标系,网页的二维坐标系为:
移动
改变元素在页面中的位置
定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素
translate最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的 translate:(50%,50%)
对行内标签没有效果
语法:
transform: translate(x,y) |
transform: translatex(n) |
transform: translatey(n) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
/* transform: translate(100px,100px); */
/* transform: translateX(100px); */
transform: translateY(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
旋转
语法:
transform:rotate(度数) |
让元素在二维平面内顺时针旋转或者逆时针旋转。
rotate里面跟度数, 单位是 deg 比如 rotate(45deg)
角度为正时,顺时针,负时,为逆时针
默认旋转的中心点是元素的中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
/* transform: translate(100px,100px); */
/* transform: translateX(100px); */
/* transform: translateY(100px); */
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
设置旋转点:
语法:
transform-origin: x y; |
注意后面的参数 x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点 (50% 50%)
还可以给x y 设置 像素 或者 方位名词 (top bottom left right center)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
/* transform: translate(100px,100px); */
/* transform: translateX(100px); */
/* transform: translateY(100px); */
transform-origin: right bottom;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
缩放:
语法:
transform:scale(x,y); |
注意其中的x和y用逗号分隔
transform:scale(1,1) :宽和高都放大一倍,相对于没有放大
transform:scale(2,2) :宽和高都放大了2倍
transform:scale(2) :只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)
transform:scale(0.5,0.5):缩小
sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
/* transform: translate(100px,100px); */
/* transform: translateX(100px); */
/* transform: translateY(100px); */
/* transform-origin: right bottom; */
/* transform: rotate(45deg); */
}
div:hover {
transform: scale(2,2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2D转换综合写法:
同时使用多个转换,其格式为:transform: translate() rotate() scale() ...等
其顺序会影转换的效果。(先旋转会改变坐标轴方向)
当我们同时有位移和其他属性的时候,记得要将位移放到最前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
div:hover {
transition-duration: 2s;
transform: translate(400px,400px) rotate(360deg) scale(2,2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>