Sukima
Sukima

Reputation: 10084

How do I use CSS transitions to fixed position a scaled element?

This seems like a lack of understanding on my part. This SO question offers some insight but not exactly waht I'm trying to do.

I have a DIV which I want to shrink and reposition like a minimize effect. I am able to use scale to do this but it retains the original size for positioning (as expected) I want to detach the element instead.

.scales.tiny {
  transform: scale(0.3);
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  -ms-transform: scale(0.3);
}

I have a working jsbin that illistrates this.

How do I reposition / clip a scaled element in CSS?

Upvotes: 0

Views: 147

Answers (1)

Jonas Grumann
Jonas Grumann

Reputation: 10786

You can use transform-origin to lock the trasformation on the right and then add a translate to move it down:

http://jsbin.com/hilekawa/1/

.scales {
    -webkit-transform-origin: 100% 100%;
}

.scales.tiny {
    -moz-transform: scale(0.3) translateY(500px);
}

Upvotes: 2

Related Questions