CODEWITHSUNDEEP
csscss-transitions
RienNeVaPlu͢s
RienNeVaPlu͢s

Reputation: 7632

transition scale relative to parent

I am using transition:scale(1.2) to hide a div in the bottom left corner of the viewport.

Current & desired results

My current approach is scaling from the center as expected:

Fiddle for 'CURRENTLY'

I want to scale it as if the div would take up the whole screen:

Fiddle for 'DESIRED'

The above is done by scaling the whole body. But instead of using another parent, I was wondering if there is another way to tell CSS in which direction the scaling should occur.

How to use transition:scale(1.2) as seen in DESIRED without using a full-size div?

Upvotes: 10

Views: 5567

Answers (1)

dc5
dc5

Reputation: 12441

You can change the transform-origin:

Something like this should be close to what you are looking for:

-webkit-transform-origin: 120% -40%;

Demo Fiddle

Modified CSS:

#clock {
    position:fixed;
    bottom:8%;
    left:7%;
    color:#fff;
    transition:all .8s;
    -webkit-transition:all .8s;
    transform-origin: 120% -40%;
    -webkit-transform-origin: 120% -40%;
}

body {
    overflow:hidden;
}

body:hover #clock {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    opacity:0;
}

Edit Because you are using left/bottom percentage based positioning for the clock, this may be closer to the effect you are looking for. Going back to a center based transform origin and transitioning left/bottom closer to the corner will provide a bit more of the affect that it is being scaled from the upper right corner of the parent.

Demo Fiddle 2

Modified CSS:

#clock {
    position:fixed;
    bottom:8%;
    left:7%;
    color:#fff;
    transition:all .8s;
    -webkit-transition:all .8s;
    transform-origin: center center;
    -webkit-transform-origin: center center;
}

body {
    overflow:hidden;
}
body:hover #clock {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    bottom: 1%;
    left: 0%;
    opacity:0;
}

Upvotes: 8

Related Questions