时间戳

首页 > 解决方案 > 如何放大以保持对象的中心到位？

css - 如何放大以保持对象的中心到位？

问题描述

我试图让它从中心而不是从左上角放大。我试过了transform: scale(2,2)，而且transform: translateX(-25%) translateY(-25%)，按照这里，似乎都没有做任何事情。有什么替代方法scale吗？它似乎在 Chrome 中不起作用。也许它与它所在的容器有关？我不确定。我尝试更改top和left坐标以说明动画播放时中心的移动，但这也无济于事。

	.box2 {
		position: relative;
		width: 40em;
		height: 20em;
	}

			.box2 > .content {
				-moz-transition: opacity 1s ease;
				-webkit-transition: opacity 1s ease;
				-ms-transition: opacity 1s ease;
				transition: opacity 1s ease;
				opacity: 1.0;
				margin: 0;
			}

			.box2.inactive > .content {
				opacity: 0;
			}


	.circle {
		position: absolute;
		border-radius: 50%;
		background: green;
		opacity: 1;
	
	}

		.circle.circle1 {
			top: 4em;
			left: 6em;
			width: 5em;
			height: 5em;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-ms-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}
		.circle.circle2 {
			top: 10em;
			left: 20em;
			width: 3em;
			height: 3em;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-ms-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}

.circle:hover {
    width: 10em;
	height: 10em;
}
<html>
<div class="box2">
<div class="circle circle1"></div>
</div>
</html>

在 Microsoft Edge 中看起来像这样，scale(2,2)在 Chrome 中根本没有动画： 在此处输入图像描述

标签： cssanimation

解决方案

您可以设置transform: translate(-50%, -50%);-.circle它相对于其起点向左和向上移动圆，从而将点设置在圆心。

.circle {
		position: absolute;
		border-radius: 50%;
		transform: translate(-50%, -50%);    
		background: green;
		opacity: 1;
	}

.circle.circle1 {
		top: 8em;
 		left: 12em;
		width: 5em;
		height: 5em;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
.circle:hover {
		width: 10em;
		height: 10em;
}
<html><div class="circle circle1"></div></html>

推荐阅读