css使用transform: scaleY()等比缩放元素的高度

96次阅读
没有评论

transform: scaleY()是CSS3中用于在垂直方向上等比缩放元素的高度的属性。通过该属性可以对元素的高度进行非常灵活的控制。

以下是一个使用transform: scaleY()等比缩放元素的高度的HTML页面完整示例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>使用transform: scaleY()等比缩放元素的高度</title>
	<style>
		.container {
			background-color: #f2f2f2;
			padding: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 300px;
		}

		.box {
			background-color: #2196f3;
			color: #fff;
			font-size: 24px;
			padding: 20px;
			transform-origin: bottom center;
			transition: transform 0.3s ease-in-out;
		}

		.box:hover {
			transform: scaleY(0.5);
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box">等比缩放元素的高度</div>
	</div>
</body>
</html>

上述示例中的.box类是需要进行等比缩放的元素,设置了一个初始的transform-origin: bottom center;属性来定义变换基点在元素底部的中心位置,transition属性使得transform变换过程具有平滑的动画效果。在.box:hover伪类下设置了transform: scaleY(0.5);属性,表示鼠标悬浮在元素上时,元素的高度将等比缩小为原来的0.5倍。

正文完
 
评论(没有评论)