CODEWITHSUNDEEP
csshovertransformscale
You Chia Lai
You Chia Lai

Reputation: 1205

CSS :hover transform scale command rotate object instead

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

Upvotes: 2

Views: 942

Answers (3)

Felix A J
Felix A J

Reputation: 6490

You can give transform only to :before so it won't rotate on hover.

.arrow {
  display: inline-block;
  height: 1px;
  width: 18px;
  border-top: solid black 1.8px;
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  transition: transform 1s;
  cursor: pointer;
}
.arrow:before {
  content: "";
  display: inline-block;
  margin-top: -10px;
  height: 8px;
  width: 8px;
  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;
position: relative;
top: -9px;
}
.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>

Upvotes: 0

maioman
maioman

Reputation: 18762

.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: rotate(-45deg) scale(1.2);
  -webkit-transform: rotate(-45deg) scale(1.2);
  -moz-transform: rotate(-45deg) scale(1.2);
  transform: rotate(-45deg) scale(1.2);
}
<span class="arrow"></span>

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.

Upvotes: 4

HelloWorld
HelloWorld

Reputation: 2330

Use this CSS for hover: 

.arrow:hover {
  -ms-transform: scale(1.2) rotate(-45deg);
  -webkit-transform: scale(1.2) rotate(-45deg);
  -moz-transform: scale(1.2) rotate(-45deg);
  transform: scale(1.2) rotate(-45deg);
}

Rotate was set on the entire element and was not accounted for during the hover transform.

here is a working example

Upvotes: 3

Related Questions