Skala przejściowa względem obiektu nadrzędnego

Question

Używam transition:scale(1.2) do ukrycia div w lewym dolnym rogu rzutni.

Moje obecne podejście jest skalowanie od centrum zgodnie z oczekiwaniami:

Fiddle for 'CURRENTLY'

chcę skalować jakby div zajmie cały ekran:

Fiddle for 'DESIRED'

Powyższe składa się poprzez skalowanie całego body. Ale zamiast używać innego rodzica, zastanawiałem się, czy istnieje inny sposób powiedzenia CSS, w którym kierunku powinno nastąpić skalowanie.

Jak korzystać z transition:scale(1.2) jak widać w ŻĄDANYCH bez korzystania z pełnowymiarowego elementu div?

Answer 1

Można zmienić pochodzenie przekształcenia-:

Coś jak to powinno być zbliżone do tego, co szukasz:

-webkit-transform-origin: 120% -40%; 

Demo Fiddle

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

---

Edytuj Ponieważ używasz pozycjonowania opartego na lewym/dolnym wskaźniku dla zegara, może to być bliższe efektowi, którego szukasz. Wracając do punktu początkowego transformacji opartego na centrum i przechodzącego w lewo/w dół, bliżej rogu, otrzymasz nieco więcej informacji o tym, że jest on skalowany w prawym górnym rogu elementu nadrzędnego.

Demo Fiddle 2

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