标签：scale obj 鼠标 缩放 元素 transform container

前言

transform属性允许你旋转，缩放，倾斜或平移给定元素。其中scale(x, y)就是实现元素缩放的属性值。

scale(x, y)的 x 乘以原本元素的 x；y 乘以原本的元素 y，就可以实现元素的缩放。

由远到近的缩放效果

从一个点，甚至是无，慢慢地缩放到一个完整，可以看清的一个过程，我叫作由远到近的缩放效果。直接看效果图：

进行缩放的元素必须要有一个父元素可以一直显示，因为一开始这个缩放元素要设置成scale(0, 0)，这样导致它不存在于页面中，鼠标悬浮时对它无效。所以父元素起一个支撑作用。

<div class="container">
	<div class="scale-obj">
		hello
	</div>
</div>

当鼠标悬浮到父元素范围内时，即伪类:hover，紫色这一块就开始由远到近的缩放效果。

.scale-obj {
	text-align: center;
	font-size: 16px;
	color: #333333;
	width: 50px;
	height: 50px;
	background-color: #7979DE;
	transition: 0.5s;
	transform: scale(0, 0);
}

.container:hover .scale-obj {
	transform: scale(1, 1);
}

.container {
	cursor: pointer;
	width: 100px;
	height: 100px;
	background-color: #00B7FF;
}

翅膀张开的缩放效果

这样的效果就像是张开翅膀，收缩翅膀一样的效果，所以我就叫作翅膀张开效果。先看效果图：

只有 CSS 样式类名 scale-obj 的transform属性值由scale(0, 0)变成了scale(0, 1)就实现了上图的效果。

.scale-obj {
	...
	transform: scale(0, 1);
}

.container:hover .scale-obj {
	transform: scale(1, 1);
}

横线变竖线的缩放效果

废话不多说，直接上效果图：

这次改的地方只有当鼠标悬浮在父元素 container 上的时候transform的属性值由scale(1, 1)变成了scale(1, 0)。

.scale-obj {
	...
	transform: scale(0, 1);
}

.container:hover .scale-obj {
	transform: scale(1, 0)`。
}

标签：scale,obj,鼠标,缩放,元素,transform,container
来源： https://www.cnblogs.com/shiramashiro/p/16338983.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。