.arrow {
display: inline-block;
height: 8px;
width: 8px;
margin-top: 20px;
border-top: solid black 2.5px;
border-left: solid black 2.5px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: transform 1s;
-moz-transition: transform 1s;
transition: transform 1s;
cursor: pointer;
}
.arrow::before {
content: "";
display: inline-block;
width: 18px;
margin-left: -3px;
margin-bottom: 7px;
border-top: solid black 1.8px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow:hover {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
}
<span class="arrow"></span>
I draw an arrow using css and try to create a hover scale up effect by using css :hover and transform:scale. However the codes rotate the arrow first and then scale it up later. I am wondering why is rotating happening and how do I fix it? Thanks in advance!
the problem is that transform properties don't sum up, if you override a property and want to keep it's original value you need to repeat it.