CODEWITHSUNDEEP
csscss-transforms
user420479
user420479

Reputation:

CSS transform: scale does not change DOM size?

Container's DOM width after transform is the same as before transform?

Why?

var theScale = aNumber;
var containerWidth = theContainer.width();
alert(containerWidth);

// and the other prefixes, as well
theContainer.css("-webkit-transform", "scale(" + theScale + ")");

containerWidth = theContainer.width();
alert(containerWidth);   // the same value ???

Upvotes: 13

Views: 10942

Answers (2)

ADOLFO MARTIN GONZALEZ
ADOLFO MARTIN GONZALEZ

Reputation: 9

I have solved the problem with ::before.

The tag has the right size and I scale the image in the ::before layer.

    *, *::before {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .card {
        width: calc(1178px / 2);
        height: calc(1280px / 2);
        position: relative;
        border: solid 5px blue;
    }
    
    .card::before {
        content: "";
        position: absolute;
        border: solid 5px red;
        width: calc(100%);
        height: calc(100%);
        background-image: url(./seasons-of-the-year.png);
        transform: scale(0.5);
        transform-origin: left top;
    }

Upvotes: 0

BoltClock
BoltClock

Reputation: 724452

Transforms don't affect the layout — or more precisely the box model — of an element. They are purely cosmetic. From the spec:

Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].

Upvotes: 31

Related Questions