親に対する遷移スケール

Question

transition:scale(1.2)を使用して、ビューポートの左下隅のdivを非表示にしています。予想通り

私の現在のアプローチは、中心からスケーリングされています

私はdivは、画面全体を取るかのように、それを拡張したいFiddle for 'CURRENTLY'

：

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