如何使用 css 转换缩放 div 但保持内容未缩放？

【问题标题】：How can I scale a div with css transform but keep the contents unscaled?如何使用 css 转换缩放 div 但保持内容未缩放？
【发布时间】：2017-02-20 14:17:09
【问题描述】：

我正在尝试创建扩展 div 以显示更多图像的效果，但目前，图像随着 div 缩放而扩展。我目前像这样扩展 div；

.panel:hover {
  transform: scaleX(1.5);
  z-index: 10;
}

我尝试将转换应用于列表和锚标记等父属性，但没有成功。这是我的代码笔

http://codepen.io/duncanmolesworth/pen/LRdKYj

在此先感谢

【问题讨论】：

标签： html css hover css-transitions css-transforms

【解决方案1】：

你正在做的是缩放面板，你想做的是增加它的宽度。

你可以试试这个：

.panel:hover {
   width: 150%;
   left: -25%;
   z-index: 10;
}

【讨论】：

成功了，谢谢！有什么办法可以保持平稳的扩展过渡？
如果它满足您的问题，您应该接受答案。不幸的是，transition 和 webkit-transition 在这种情况下不起作用。这是我所知道的仅使用 CSS 制作动画的唯一简单方法，也许其他人知道另一种方法。