【问题标题】: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;
    }
    

    【讨论】:

    • 成功了,谢谢!有什么办法可以保持平稳的扩展过渡?
    • 如果它满足您的问题,您应该接受答案。不幸的是,transitionwebkit-transition 在这种情况下不起作用。这是我所知道的仅使用 CSS 制作动画的唯一简单方法,也许其他人知道另一种方法。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-12-05
    • 1970-01-01
    • 2011-10-19
    • 1970-01-01
    • 2016-11-25
    • 1970-01-01
    相关资源
    最近更新 更多