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

Question

我正在尝试创建扩展div以显示更多图像的效果，但此刻，图像会随着div缩放而扩展。我现在像这样扩展div;

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

我尝试将转换应用到父属性，例如list和anchor标签，但没有运气。这是我的codepen

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

非常感谢提前

Answer 1

你正在做的是对面板进行缩放，你想要做的就是增加它的宽度。

你可以试试这个：

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