Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3: Calculate difference between (left + scale3d) and (transition3d + scale3d)

CSS3: Calculate difference between (left + scale3d) and (transition3d + scale3d)

Problem

Why is there a difference between (scale3d and left) and (scale3d and translate3d)? And how do I calculate the difference between them?

See example: jsBin

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: rgba(0,0,0, .3);
    border-radius:7px;
    font-size:20px;

    -webkit-transform-origin:50% 50%;
}
#t1 {
    left: 200px;
    -webkit-transform: scale3d(0.5, 0.5, 1);
}
#t2 {
    top: 200px;
    -webkit-transform: scale3d(0.5, 0.5, 1) translate3d(200px, 0, 0);
}

and the simple HTML:

scale3d and left
scale3d and transition3d
Problem courtesy of: andlrc

Solution

CSS3 Transforms alter the local coordinate system. When you scale an element you're also scaling any translations applied to that div. Here - if you change the translate to 400px - you get the same result (reversing the effect of the scale).

You can check what transformations are currently applied to an element by using getComputedStyle().

Solution courtesy of: Michael Mullany

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3: Calculate difference between (left + scale3d) and (transition3d + scale3d)

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×