CSS3的transform属性可以对元素进行变形，包括旋转、缩放、平移等操作。其中，transform: scaleY()是指对元素进行沿Y轴方向的缩放操作。
具体而言，transform: scaleY()可以用来实现以下效果：
- 等比缩放元素的高度。设置一个小于1的缩放比例，可以让元素的高度减小，但是宽度不变。
- 垂直翻转元素。将缩放比例设置为-1，可以让元素沿Y轴翻转，也就是上下倒置。
- 与scaleX()配合使用，实现二维缩放。可以同时设置scaleX()和scaleY()的缩放比例，实现元素的二维缩放。
以下是一些示例：
-
等比缩放元素的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform: scaleY()示例</title>
<style>
.box {
width: 100px;
height: 200px;
background-color: red;
transform: scaleY(0.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>-
垂直翻转元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform: scaleY()示例</title>
<style>
.box {
width: 100px;
height: 200px;
background-color: red;
transform: scaleY(-1);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>-
与scaleX()配合使用，实现二维缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform: scaleY()示例</title>
<style>
.box {
width: 100px;
height: 200px;
background-color: red;
transform: scaleX(1.5) scaleY(0.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>需要注意的是，transform属性可以同时包含多个变形操作，它们按照从右到左的顺序进行执行。例如，transform: scaleY(0.5) rotate(45deg)表示先沿Y轴缩放元素的高度，再将元素顺时针旋转45度。
正文完