CSS 中的变换 scale/rotate 效果不应影响 child

Question

我的结构如下：

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 度。（这是预期的）。现在，我不想将旋转传播到 children (div > span)。他们应该扩大规模，但不应该发生轮换。

此外，如果可能的话，我也想在图标悬停时移动 hrs，它会缩放。 hrs 应该相应地移动，在气泡周围留一点余量。

我试过设置以下属性:

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

但是悬停时图标会放大 4 倍，并且仍然会发生旋转。

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

Answer 1

一种方法是将子项旋转到另一个方向。

我添加到 css 的代码：

.bubble:hover span {
  transform: rotate(90deg);
}

.bubble span {
    transition: all 0.3s ease-in-out;
}

这是一个解决方法。我希望有另一种方法可以做到这一点。

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);
}

.bubble:hover span {
  transform: rotate(90deg);
}

.bubble span {
    transition: all 0.3s ease-in-out;
}

<!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>

Answer 2

您的 html 架构不完全适合您的问题。如果您可以更改它，最好的方法是：

 <div class="container">
    <div class="bubble"></div>
    <span class="fa fa-inverse fa-github fa-lg"></span>
</div>

气泡内部 div 和跨度应绝对相对于容器 div 定位。例如：

.container { position: relative; }
.container > div, .container > span {position: absolute; top: 10px;  left: 10px;}

然后您可以对 div 和跨度应用不同的过渡/动画。

.container:hover > div {
    transform: scale(2) rotate(-90deg);
}
.container:hover > span {
    transform: rotate(-90deg);
}

Answer 3

另一种解决方案是使用 pseudo 选择器 (: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/

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

由于 .bubble 容器没有定义的尺寸 (height/width)，因此图标具有不同的宽度导致不一致。为了解决这个问题，我添加了 fa-fw class 这使得图标固定宽度以获得更好的一致性。
背景图片默认定位到top left，除非更改为center，否则可能会导致定位问题。
"push" 效果是使用在 :hover

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/

CSS 中的变换 scale/rotate 效果不应影响 child

transform scale/rotate effect in CSS should not affect the child

html

css

css-transitions

css-transforms