html - CSS 中的变换比例/旋转效果不应影响 child

标签 html css css-transitions css-transforms

我的结构如下:

html {
  background-color: rgba(0, 0, 0, 0.75);
}
.container {
  margin: 10% auto;
  text-align: center;
}
div > span {
  display: inline-block;
}
.horizontal {
  display: inline-block;
  position: relative;
  top: .1em;
  width: 15%;
}
.bubble {
  display: inline-block;
  padding: 0.5em;
  background: url(http://imgh.us/Service_bubble.svg) no-repeat;
  background-size: contain;
  transition: all 0.3s ease-in-out;
}
.bubble:hover {
  transform: scale(2) rotate(-90deg);
}
<!DOCTYPE html>
<html>

<head>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
</head>

<body>
  <div class="container">
    <div class="bubble">
      <span class="fa fa-inverse fa-google fa-lg"></span>
    </div>
    <hr class="horizontal" />
    <div class="bubble">
      <span class="fa fa-inverse fa-facebook fa-lg"></span>
    </div>
    <hr class="horizontal" />
    <div class="bubble">
      <span class="fa fa-inverse fa-twitter fa-lg"></span>
    </div>
    <hr class="horizontal" />
    <div class="bubble">
      <span class="fa fa-inverse fa-github fa-lg"></span>
    </div>
  </div>
</body>

</html>

正如您在代码片段中看到的,当您将鼠标悬停在任何图标上时,包裹任何图标的气泡会放大,并向左旋转 90 度。 (这是预期的)。现在,我不想将旋转传播给子项 (div > span)。它们应该按比例放大,但不应发生轮换。

此外,如果可能的话,我也想在图标悬停在其上方并缩放时替换 hrhr 应该相应地移动,在气泡周围留一点余量。

我试过设置以下属性:

div > span:hover {
    transform: scale(2);
}

但它在悬停时将图标放大 4 倍,并且仍然发生旋转。

有什么想法吗?我只想依赖 CSS,不想在这里涉及 JavaScript。

最佳答案

另一种解决方案是使用 选择器 (:before),它在 :hover 上进行旋转。

html {
  background-color: rgba(0, 0, 0, 0.75);
}

.container {
  margin: 10% auto;
  text-align: center;
}

div > span {
  display: inline-block;
}

.horizontal {
  display: inline-block;
  position: relative;
  top: .1em;
  width: 15%;
}

.bubble {
  display: inline-block;
  padding: 1em;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.bubble:before {
  content:'';
  background: url(http://imgh.us/Service_bubble.svg) center no-repeat;
  background-size: contain;
  transition: all 0.3s ease-in-out;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0; left: 0;
}

.bubble:hover {
  transform: scale(1.5);
  margin: 0 10px;
}

.bubble:hover::before {
  transform: rotate(-90deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="bubble">
    <span class="fa fa-inverse fa-google fa-fw fa-lg"></span>
  </div>
  <hr class="horizontal">
  <div class="bubble">
    <span class="fa fa-inverse fa-facebook fa-fw fa-lg"></span>
  </div>
  <hr class="horizontal">
  <div class="bubble">
    <span class="fa fa-inverse fa-twitter fa-fw fa-lg"></span>
  </div>
  <hr class="horizontal">
  <div class="bubble">
    <span class="fa fa-inverse fa-github fa-fw fa-lg"></span>
  </div>
</div>

jsFiddle:https://jsfiddle.net/azizn/gypu0pn2/

我在您的原始代码中编辑了一些内容以创建更平滑的效果:

  1. 图标具有不同的宽度,导致不一致,因为 .bubble 容器没有定义尺寸(高度/宽度)。为了解决这个问题,我添加了 fa-fw 类,它使图标固定宽度以实现更好的一致性。

  2. 背景图片默认位于左上,除非更改为center,否则可能会导致定位问题。

  3. “插入”效果是在 :hover

  4. 上使用添加的 margin 创建的

编辑:更简化的 HTML 结构。删除了 .bubble 容器并改用 :after

html { background-color: rgba(0, 0, 0, 0.75); }

.container { margin: 10% auto; text-align: center; }

.container hr {
  display: inline-block;
  position: relative;
  top: .1em;
  width: 15%;
}

.bubble {
  padding: 1em;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.bubble::after {
  content:'';   position: absolute;
  background: url(http://imgh.us/Service_bubble.svg) center no-repeat;
  background-size: contain;
  transition: all 0.3s ease-in-out;
  height: 100%; width: 100%;
  top: 0; left: 0;
}

.bubble:hover {
  transform: scale(1.5);
  margin: 0 10px;
}

.bubble:hover::after { transform: rotate(-90deg); }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  <span class="bubble fa fa-inverse fa-google fa-fw fa-lg"></span>
  <hr>
  <span class="bubble fa fa-inverse fa-facebook fa-fw fa-lg"></span>
  <hr>
  <span class="bubble fa fa-inverse fa-twitter fa-fw fa-lg"></span>
  <hr>
  <span class="bubble fa fa-inverse fa-github fa-fw fa-lg"></span>
</div>

jsFiddle:https://jsfiddle.net/azizn/1uqrqoda/

关于html - CSS 中的变换比例/旋转效果不应影响 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36627466/

相关文章:

javascript - 如何修复/解决 CSS3 Transitions 的 transitionend 事件的浏览器实现中的不一致?

css transition hover with font awesome

html - 行中的两个 iframe 高度相同

javascript - 我可以在尝试预加载 XHR 数据时添加自定义标题吗?

Firefox 中的 Jquery 没有正确报告 border-bottom-width 属性

javascript - 我必须制作一个可以运行一些简单 JavaScript 的网页,但我认为我的脚本没有运行

css - 带有 CSS 转换的 Web 应用程序上闪烁的黑色方 block

html - 将文本放在 div 的底部

javascript - 删除滚动条上的链接

css - 为什么 IE 能正确解析长度为 4 而不是 3 的文本阴影?