html - CSS:Scale(x) 使图标旋转

Question

我有以下文章 View 图标:

.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 度。

1. 为什么会这样？我是否遗漏了伪元素中的某些内容？

2. 如何修复它/如何在不旋转的情况下缩放它？ (变换/旋转会将图标缩放回原始大小)

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>