CSS: Scale(x) 使图标旋转

Question

我有以下文章查看图标：

.viewIcon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: #888;
    position: relative;
    border-radius: 65% 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px;
}

.viewIcon:before,
.viewIcon:after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    border-radius: 100%;
}

.viewIcon:before {
    height: .5em;
    width: .5em;
    background: #fff;
    margin-top: -.25em;
    margin-left: -.25em;
}

.viewIcon:after {
    height: .25em;
    width: .25em;
    background: #888;
    margin-top: -.1em;
    margin-left: -.11em;
}

.activeArticle {
    transform: scale(1.5);
}

<div class="viewIcon"></div>
<br/><br/>
<div class="viewIcon activeArticle"></div>

如您所见，“.activeArticle”将图标旋转了 45 度。

为什么会这样？我在伪元素中遗漏了什么吗？
如何解决it/How我可以在不旋转的情况下缩放它吗？（transform/rotate 会将图标缩放回原始大小）

Answer 1

当您为 activeArticle 指定 scale 时，您正在重置转换 - 使用此：

.activeArticle {
    transform: rotate(45deg) scale(1.5);
}

下面的演示：

.viewIcon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: #888;
  position: relative;
  border-radius: 65% 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 5px;
}
.viewIcon:before,
.viewIcon:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  border-radius: 100%;
}
.viewIcon:before {
  height: .5em;
  width: .5em;
  background: #fff;
  margin-top: -.25em;
  margin-left: -.25em;
}
.viewIcon:after {
  height: .25em;
  width: .25em;
  background: #888;
  margin-top: -.1em;
  margin-left: -.11em;
}
.activeArticle {
  transform: rotate(45deg) scale(1.5);
}

<div class="viewIcon"></div>
<br/>
<br/>
<div class="viewIcon activeArticle"></div>

Answer 2

使用rotate()&scale()变换属性组合，就像这样：

.activeArticle {
  transform: scale(1.5) rotate(45deg);
}

.viewIcon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: #888;
    position: relative;
    border-radius: 65% 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px;
}

.viewIcon:before,
.viewIcon:after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    border-radius: 100%;
}

.viewIcon:before {
    height: .5em;
    width: .5em;
    background: #fff;
    margin-top: -.25em;
    margin-left: -.25em;
}

.viewIcon:after {
    height: .25em;
    width: .25em;
    background: #888;
    margin-top: -.1em;
    margin-left: -.11em;
}

.activeArticle {
    transform: scale(1.5) rotate(45deg);
}

<div class="viewIcon"></div>
<br/><br/>
<div class="viewIcon activeArticle"></div>

希望对您有所帮助！

CSS: Scale(x) 使图标旋转

CSS: Scale(x) makes icon rotate

html

css

pseudo-element

css-transforms