我如何用css变换缩放div，但保持内容不缩放

Question

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

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

我已经尝试将转换应用于父属性，如列表和锚标记，但没有运气。这是我的代码

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

提前致谢

Answer 1

你要做的是缩放面板，你要做的是增加它的宽度。

你可以试试:

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