是否可以使用CSS转换属性只调整元素的宽度属性而不拉伸它？

disho6za 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(221)

我想要实现的是只在#b:hover上使用transform来实现#a:hover的行为，代码如下：

div#a, div#b {
  width:100px;
  height:30px;
  background:#ccc;
}

div#a:hover {
  width:150px;
}

div#b:hover {
  transform:scaleX(1.5);
}

<div id="a">Test1</div>

<div id="b">Test2</div>

现在有两个问题：
1.文本被拉伸。

div不是从左点展开，而是从中心展开，因此它在容器的左侧展开。
这可能吗？

css

来源：https://stackoverflow.com/questions/74834911/is-it-possible-to-use-css-transform-property-only-to-adjust-an-elements-width-p

1条答案

按热度按时间

cygmwpex1#

如果你能考虑和额外的 Package 你可以做到

div#a, div#b {
  width:100px;
  height:30px;
  background:#ccc;
}

div#a:hover {
  width:150px;
}

div#b:hover {
  transform: scaleX(1.5);
  transform-origin: left; /* change the origin to be left */
}

div#b:hover > div {
  transform: scaleX(calc(1/1.5)); /* the opposite transform to keep the text */
  transform-origin: inherit;
}

<div id="a">Test1</div>

<div id="b"><div>Test2</div></div>

赞(0）回复(0）举报 2022-12-20

我来回答

是否可以使用CSS转换属性只调整元素的宽度属性而不拉伸它？

1条答案

相关问题

热门标签

最新问答