过渡比例相对于父母

Question

我正在使用transition:scale(1.2)隐藏视口左下角的div。

我目前的做法是按预期从中心扩展：

的 Fiddle for 'CURRENTLY'

我想缩放它，好像div会占据整个屏幕：

的 Fiddle for 'DESIRED'

以上是通过缩放整个body来完成的。但而不是使用另一个父，我想知道是否有另一种方法告诉CSS应该在哪个方向进行缩放。

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

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