CODEWITHSUNDEEP
css
iLemming
iLemming

Reputation: 36166

Transform scaleX relative to other elements

I want whenever I scale - adjacent elements to move accordingly. How can I do that? Whenever I do scale it goes on top of adjacent element.

jsbin

In opposite to that if I change width value it works as I wanted, yet I can't use width in transitions.

HTML:

  <input>
  <div class="foo">

CSS:

input{
  display: inline-block;
  transition: all 1s ease;  
  transform-origin:left;
}
input:focus{
  transform: scaleX(2)
}

.foo{
  display: inline-block;
  width: 200px;
  height: 20px;
  background-color: red;
}

Upvotes: 2

Views: 120

Answers (1)

Josh Burgess
Josh Burgess

Reputation: 9567

Remember to set both an initial and a destination value for your transitions, like so:

input{
  display: inline-block;
  vertical-align: top;
  transition: width 1s ease;  
  transform-origin:left;
  width: 100px;
}
input:focus{
  width: 200px
}

JSBin illustrating this here

Upvotes: 1

Related Questions