首先transform-origin 默认的转换原点是 center
scale缩放,指的是“缩小”和“放大”。在CSS3中,我们可以使用scale()方法来将元素根据中心原点进行缩放
但是一般的布局都是以左上角为中心进行布局的
所以此时需要使用translate(-50%, -50%),使元素左移和上移自身元素大小的50%,对齐左上角
transform: scale(0.5,0.5) translate(-50%, -50%);
但是,如果我们更改了元素的中心原点就不需要translate(-50%, -50%)了
/* 此时改变中心原点就不需要translate(-50%, -50%) */
transform-origin: top left;
transform: scale(0.5,0.5);
缩放scale()方法也有3种情况:
(1)scaleX(x):元素仅水平方向缩放(X轴缩放);
(2)scaleY(y):元素仅垂直方向缩放(Y轴缩放);
(3)scale(x,y):元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放);
在父级设置会被子代继承
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*/
/* .father {
transform: scale(0.5,0.5) translate(-50%, -50%);
} */
.father {
/* 此时改变中心原点就不需要translate(-50%, -50%) */
transform-origin: top left;
transform: scaleY(0.5);
}
/* .father {
} */
.other {
/* son1不继承 */
height: 100px;
width: 100px;
background-color: green;
}
.son {
height: 200px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="other"></div>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>