Rimozione css ereditato Trasformazione 3D

Question

diciamo che ho un contenitore padre che è impostato per

-webkit-transform: perspective(300px) rotateX(45deg); 
-webkit-transform-origin: 50% 100% 0%; 

e al suo interno è un numero di elementi in cui io non voglio avere quella styling. cosa devo fare? imposta i suoi valori di trasformazione su 0? come

-webkit-transform: perspective(0px) rotateX(0deg); 
-webkit-transform-origin: 0% 0% 0%; 

ho un jsfiddle campione qui: http://jsfiddle.net/8cUPL/1/

Answer 1

Vuoi dire che volete gli articoli a comportarsi come se non fanno parte del contenitore perspectived a tutti? No, non è possibile.

È tuttavia possibile utilizzare un po 'di Javascript per rimuovere gli elementi del contenitore e inserirli altrove nell'albero DOM. Quindi saranno liberi dalla prospettiva.

var container = document.getElementById('container'); 
var items = container.getElementsByClassName('items'); 
for (var i = items.length-1; i>=0; --i) { 
    var el = items[i].cloneNode(true); 
    var itemparent = items[i].parentNode; 
    itemparent.removeChild(items[i]); 
    container.parentNode.insertBefore(el, container); 
} 

Fiddle

Answer 2

Il perspective e la sua -origin in realtà non fare nulla da soli. Per rimuovere la trasformazione di un elemento figlio appena resettare le sue transform in questo modo:

transform: none; 

Answer 3

Le transform-* proprietà, come opacity e alcuni altri quelli di rendering legati, non 'eredita' in senso CSS di eredità. Invece, applicano le modifiche visive all'elemento nel suo insieme, compresi tutti i suoi discendenti. Applicare qualcosa come transform: none; a questi discendenti non ha alcun effetto visibile, significa solo che questi elementi non vengono trasformati da soli, ma vengono comunque trasformati con l'elemento padre - non perché "ereditano" il suo stile, ma perché sono parti del suo aspetto.

L'unico modo per "annullare" visivamente la trasformazione dell'elemento padre per un discendente (ovvero renderlo come non trasformato) è trasformarlo in modo specifico in modo che il risultato di questa trasformazione guardi dalla prospettiva data il lo stesso che sembrerebbe senza alcuna trasformazione. Per rendere ciò possibile, l'elemento trasformato stesso e tutti gli antenati intermedi dell'elemento specificato devono avere transform-style: preserve-3d. La necessaria trasformazione "compensante" può essere calcolata dalla scena 3D risultante o essere costruita semplicemente regolando i valori di trasformazione attraverso prove ed errori, ad es.

.items{ 
    ... 
    transform: translate3d(-51px, 11px, 29px) rotateX(-45deg); 
    transform-origin: 50% 100% 0px; 
} 

(vedi JSfiddle).

Sfortunatamente, questa soluzione alternativa non è compatibile con overlow:hidden perché (insieme a some other properties) rimuove efficacemente transform-style: preserve-3d. Quindi, se hai bisogno di ritagliare le parti in overflow dell'elemento trasformato e di 'annullare' la trasformazione della sua parte nello stesso tempo, l'unica soluzione adatta a te sarebbe organizzare il codice in modo che questa parte non sia la discendente dell'elemento trasformato più.