CODEWITHSUNDEEP
css
user3589485
user3589485

Reputation: 417

Changing scale point in CSS

.bunch is an image. Is there a way to change this animation so that it scales from the bottom of the image so its appears from the floor instead? At the moment it scales from the middle.

.bunch {
  position: absolute;
  top: 250px;
  left:320px;
  -webkit-animation: flowerGrow 3s forwards;
}


@-webkit-keyframes flowerGrow {
  0% { -webkit-transform: scaleY(0)}
  100% { -webkit-transform: scaleY(1)}
}

Thanks in advance!

Upvotes: 0

Views: 140

Answers (1)

André Dion
André Dion

Reputation: 21728

See transform-origin:

.bunch {
  position: absolute;
  top: 250px;
  left:320px;
  -webkit-animation: flowerGrow 3s forwards;
  -webkit-transform-origin: 50% 100%;
}

@-webkit-keyframes flowerGrow {
  0% { -webkit-transform: scaleY(0)}
  100% { -webkit-transform: scaleY(1)}
}

DEMO

Upvotes: 2

Related Questions