主页 / 问题 / 605553
Accepted
Bim Bam
Asked:2020-12-20 09:29:39 +0000 UTC2020-12-20 09:29:39 +0000 UTC

变换时的奇怪行为

  • 772

这是带有工作示例的代码链接：http: //codepen.io/Bimbam/pen/rWPbpe

<ul class="cnap-items text-center">
  <li class="adm-tax">
     <p>Нажми на меня</p>
  </li>

问题是为什么这个块不是只向右扩展，而是主要向右扩展，向左扩展一点然后又回来了？在 transform-origin 的帮助下，我选择了 0% x、50% x、50% x 的坐标，使用 scaleX 我将其向右拉伸，但结果并不是我们想要的那样。我希望它是线性的，扩展到右侧......

javascript

1 个回答

  1. Best Answer

    我稍微更正了代码：

    $(".adm-tax").click(function(event) {

	$(".adm-tax").css({
        '-webkit-transform': 'scaleX(2.1)',
			  ' transform': 'scaleX(2.1)'
	});
	
});
    .cnap-items {
	float: left;
	margin-top: 15px;
}
.cnap-items li {
  margin-left: 50px;
  text-align: center;
	width: 400px;
	height: 60px;
	background-color: #009852;
	margin-top: 10px;
	color: white;
	padding-top: 20px;
	cursor: pointer;
	border-left: 3px solid #036136;
}
.adm-tax {
  transform-origin: 0% 0%;
  transition: all 5s linear;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="cnap-items text-center">
	<li class="adm-tax"><p>Нажми на меня</p></li>
</ul>

    • 2

相关问题