css - 相对于父级的过渡比例

Question

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

我目前的方法是按预期从中心缩放：

Fiddle for 'CURRENTLY'

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

Fiddle for 'DESIRED'

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

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

Answer 1

您可以更改变换原点：

像这样的东西应该接近你正在寻找的东西：

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