【问题标题】:On hover child image slightly move to right在悬停子图像上稍微向右移动
【发布时间】:2019-01-16 16:47:26
【问题描述】:

我已经给了transform:scale(0.95),并且在悬停时我正在制作transform: scale(1),只是为了让悬停效果反弹。 我有img 作为孩子。在悬停时,它会稍微向右移动。我正在使用backface-visibility: hidden 来避免这个问题,但不知何故它对我不起作用。

Link on which I am working

关于我之后的 4 列标题和图标。 (健康与治疗,灵感...)

我也尝试过其他技术,例如 will-change: transform transform: rotate(0) 等。但我没有任何效果。

提前致谢。

【问题讨论】:

  • 寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码,最好是在堆栈片段中。尽管您提供了一个链接,但如果它变得无效,那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/demo doesn't work can I just paste a link

标签: html css css-transitions css-transforms


【解决方案1】:

您是否尝试使用transform: translate(); 来补偿它将向右移动的像素数。 有关转换翻译的更多信息,您可以查看以下链接。 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

【讨论】:

  • 我认为这不是必需的,因为 img 在悬停时略微移动,然后又回到了原来的位置。
  • 你不能在悬停时添加 translateX 来补偿移动?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-05-03
  • 2013-02-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多