transition scale relative to parent - css

Question

I am using transition:scale(1.2) to hide a div in the bottom left corner of the viewport.
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?

Answer 1

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;
}