过渡比例相对于父母

Question

我transition:scale(1.2)用来隐藏div视口左下角的a.

我目前的方法是按预期从中心扩展:

Fiddle for 'CURRENTLY'

我想缩放它,好像它div会占用整个屏幕:

Fiddle for 'DESIRED'

以上是通过缩放整体来完成的body.但是,而不是使用其他父母,我想知道是否有另一种方式告诉在哪个方向应该发生的缩放CSS.

如何transition:scale(1.2)在不使用全尺寸div的情况下在DESIRED中看到？

Answer 1

您可以更改transform-origin:

这样的东西应该接近你想要的东西:

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

Demo Fiddle

修改后的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;
}

编辑因为您使用基于左/下百分比的时钟定位,这可能更接近您正在寻找的效果.回到基于中心的变换原点并将左/底过渡到更靠近角落将提供从父项的右上角缩放的更多影响.

Demo Fiddle 2

修改后的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;
}