<!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>
.box1{
width: 100px;
height: 100px;
background-color: cadetblue;
margin: 200px auto;
margin-bottom: 0;
transition: 2s;
}
.bottom{
width: 100px;
height: 100px;
background-color: rgb(57, 209, 77);
margin: 0 auto;
}
.box1:hover{
/*
对元素进行缩放的函数 (不会影响其他元素的位置)
scaleX() 对X轴进行缩放
scaleY() 对Y轴进行缩放
scale() 对XY轴进行缩放
还有一个叫做 变形的原点
transform-origin:x y;
x y 代表变形开始(原点)的坐标
*/
transform: scale(1.5);
/* transform: scaleX(2);
transform: scaleY(2); */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="bottom"></div>
</body>
</html>
29.变形_缩放——H5C3
最新推荐文章于 2022-03-07 16:08:42 发布