CODEWITHSUNDEEP
csstransform
givemesnacks
givemesnacks

Reputation: 336

Using CSS transform scale maintains original positioning

When using the transform: scale() property, elements that are floated next to each other act like their full-size counterparts even after the scaling.

As seen here: http://jsfiddle.net/a4BMK/1/ (click the button)

Is there a property that will resize the elements, then re-float them so they are again touching each other?

By the way, the real elements I'm using are models of all different widths and heights, so simply using width: or height: across all the elements is not an easy solution.

Upvotes: 1

Views: 5392

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25934

In short, no, there is no CSS way of positioning based on the scaled value that I know of.

I do, however, know how you could compensate (without using any javascript) using a work around. You can use a translateX(-25%) in addition to the scale to position all of them next to each other. With that being said, the percents have to increase per element to compensate for the other being moved. This means that you have to use a set number of elements or perhaps a pre-processor to compensate

.img:nth-child(1) {
    transform: scale(.8);
}
.img:nth-child(2) {
    transform: scale(.8) translateX(-25%);
}
.img:nth-child(3) {
    transform: scale(.8) translateX(-50%);
}
.img:nth-child(4) {
    transform: scale(.8) translateX(-75%);
}
.img:nth-child(5) {
    transform: scale(.8) translateX(-100%);
}
img {
    float: left;
    transform-origin: top left;
}

Demo

Upvotes: 4

Related Questions