scala di transizione relativa al genitore

Question

Sto usando transition:scale(1.2) per nascondere un div nell'angolo in basso a sinistra della finestra.

Il mio approccio attuale è scalando dal centro come previsto:

Fiddle for 'CURRENTLY'

voglio scalare come se l'div accoglierebbe l'intero schermo:

Fiddle for 'DESIRED'

Quanto sopra è fatto scalando tutta body. Ma invece di usare un altro genitore, mi chiedevo se c'è un altro modo per dire al CSS in quale direzione dovrebbe avvenire il ridimensionamento.

Come utilizzare transition:scale(1.2) come visto in DESIDERATO senza utilizzare un div full-size?

Answer 1

È possibile modificare l'origine trasformare-:

Qualcosa del genere dovrebbe essere vicino a quello che stai cercando:

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

Demo Fiddle

CSS Modificato:

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

---

Modifica Poiché si utilizza il posizionamento basato sulla percentuale di sinistra/fondo per l'orologio, questo potrebbe essere più vicino all'effetto che si sta cercando. Tornando a un'origine di trasformazione basata sul centro e passando a sinistra/in basso più vicino all'angolo si otterrà un po 'più dell'affetto che viene ridimensionato dall'angolo in alto a destra del genitore.

Demo Fiddle 2

CSS Modificato:

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