相对于父级的过渡比例答案

【问题标题】：transition scale relative to parent相对于父级的过渡比例
【发布时间】：2013-09-11 05:26:01
【问题描述】：

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

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

Fiddle for 'CURRENTLY'

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

Fiddle for 'DESIRED'

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

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

【问题讨论】：

标签： css css-transitions

【解决方案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;
}

【讨论】：

@RienNeVaPlus 我刚刚注意到您正在使用百分比定位 - 可能有适合您的解决方案...