Question

我正在尝试使其从中心而不是从左上角放大。根据{{3}}，我尝试过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中完全没有动画： here

Answer 1

您可以将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>

如何放大以保持对象中心在适当位置？

1 个答案: