Sandrooco Sandrooco - 4 days ago 6
CSS Question

CSS: Scale(x) makes icon rotate

I have the following view icon for articles:



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





As you can see the ".activeArticle" rotates the icon around 45 degrees.


  1. Why is this happening? Am I missing something in the pseudo elements?

  2. How can I fix it/How can I scale it without rotation? (transform/rotate will scale the icon back to the original size)


Answer

You are resetting your transform when you specify scale for activeArticle - use this:

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

Demo below:

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

Comments