相對於父項的轉換比例

Question

我使用transition:scale(1.2)來隱藏視口左下角的div。

我目前的做法是從中心縮放預期：

Fiddle for 'CURRENTLY'

我想它規模好像div會佔據整個屏幕：

Fiddle for 'DESIRED'

以上是通過縮放整個body來完成的。但而不是使用另一個家長，我想知道是否有另一種方式來告訴CSS應該發生縮放的方向。

如何使用transition:scale(1.2)如在中看到的那樣DESIRED沒有使用全尺寸div？

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