CSS3 matrix3d rettangolo a trasformazione trapezoidale

Sto tentando di utilizzare il supporto di Webkit per CSS3 transform: matrix3d(<matrix>) per creare un effetto 'falling card'. (L'unico obiettivo per l'uscita di questo è Chrome)CSS3 matrix3d rettangolo a trasformazione trapezoidale

L'effetto finale deve passare attraverso le 4 fasi qui di seguito e finire come solo una linea orizzontale:

enter image description here

Ecco il CSS ho ora:

#test { 
      margin: auto auto; 
      height: 200px; 
      width: 200px; 
      border:1px solid black; 
      background-color: lightblue; 
      -webkit-perspective: 1000; 
      -webkit-transform-origin: 50% 100%; 
      -webkit-transform-style: preserve-3d; 
      -webkit-animation-name: flip-card;   
      -webkit-animation-duration: 1s;   
      -webkit-animation-iteration-count: infinite;   
      -webkit-animation-timing-function: linear; 
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5); 
     } 
     @-webkit-keyframes flip-card { 
      0% {-webkit-transform: ;} 
      100% {-webkit-transform: 
         matrix3d(1, 0, 0, 0, 
           0, 1, 0, 0, 
           0, 0, 0, 0, 
           0, 0, 0.001, 1);} 
     }

E il codice HTML è semplice per i test:

<body> 
    <div id="test">this div should fall forward...</div> 
</body>

La matrice3d di cui sopra era basata sulla lettura this SO question, ma produce un quadrato restringente che ruota intorno all'asse x definito dal fondo della casella iniziale.

Capisco che matrice CSS 2D in grado di produrre solo rettangoli e parallelogrammi dalla trasformazione di una scatola e che le forme irregolari bisogno del Matrix3D trasformare operazione (this è stato utile per rinfrescare la mia dissolvenza algebra lineare!), Ma mi sembra di essere solo in grado per produrre rettangoli e parallelogrammi.

Ho dato un'occhiata ad alcune delle domande SO contrassegnate con matrix e transformation. Molti di questi non sono basati su CSS e non sono stato in grado di ottenere la trasformazione che voglio.

fonte

2011-02-10 beggs

ho creato uno strumento per giocherellare con i valori css di trasformazione qui: http://www.duopixel.com/ stack/webkitmatrix /, ma temo di non riuscire a produrre un trapezoide con Chrome. Provaci. – Duopixel

@Duopixel: questo è un ottimo strumento. Posso creare un trapezoide in Safari ... ma inclinato sull'asse Y e non sull'asse X spostando il cursore Riga-1, Colonna4 (il cursore in alto a destra). In Chrome, lo stesso cursore crea un parallelogramma. La mia comprensione è che dovrei spostare il cursore Row-4, Column-3 per creare il parallelogramma dell'asse X, ma non ha alcun effetto in Safari o Chrome. – beggs

Questo [CoffeeScript fiddle] (http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/#cp_embed_ifnqH) può essere utile. La pagina del blog su cui è incorporata ha anche alcune utili spiegazioni. – mbomb007

-webkit-perspective non funziona ancora in Chrome (solo Safari), quindi non funzionerà (prova il tuo codice in Safari). Anche le trasformazioni 3D in Chrome, in generale, sono un po 'incerte e non si combinano bene con i gradienti, per esempio.

Anche ruotare3d (1, 0, 0, 90 gradi) funziona esattamente come una matrice per ottenere ciò che si sta facendo. La notazione a matrice è solo un modo breve per combinare rotazione 3D, inclinazione, spostamento e origine in un singolo array. Dato che stai ruotando attorno all'asse x, non è necessario andare a queste lunghezze.

webkit-transform: perspective(800) rotate3d(1, 0, 0, -90deg)

È esattamente ciò di cui hai bisogno.

Aggiornamento: Ecco un link to a jsfiddle con esattamente quello che state cercando che funziona sia in Chrome e Safari. Si noti che è importante specificare che l'origine della trasformazione per il flip è la stessa dell'origine per la prospettiva. L'origine prospettiva di Webkit specifica dove la "camera" si trova nello spazio 3D rispetto a qualsiasi trasformazione 3D ed è facile ottenere risultati non intuitivi se non si presta attenzione.

2 ° Aggiornamento: prospettiva è ora supportata in tutti i browser di bordo (anche se anti-aliasing di Firefox ha poco raccomandabile (e ha bisogno -moz ovviamente))

3 ° Aggiornamento: Aggiornato il violino per il browser croce per Firefox, IE e non prefisso.

fonte

2011-02-10 16:11:56

Interessante, stavo usando rotateX() ma non fornisce la prospettiva che l'oggetto sta cadendo in avanti. Ho aggiunto varie impostazioni di prospettiva e fotogrammi chiave, ma non ho mai potuto ottenere l'effetto '3D'. Proverò Safari e vedrò cosa c'è di diverso. – beggs

Ho provato le modifiche prospettiche in Safari 5.0.3 (Windows) e non c'è alcun effetto. Nello strumento che @Duopixel ha menzionato nel suo commento, non riesco a ottenere il trapezoide dell'asse X, solo un asse Y in Safari, mentre Chrome produrrà solo un parallelogramma sull'asse Y. Sembra che la risposta sia "non possibile". – beggs

Stavo leggendo la specifica di transizione CSS quando ho notato che la larghezza del bordo è animabile, e si possono falsificare i trapezi usando le larghezze dei bordi. Ciò significa che puoi falsificare le carte in caduta in Chrome, Opera e FF4!

#stage { 
    margin-top: 200px; 
    position: relative; 
} 

#trapezoid { 
    position: absolute; 
    bottom: 0; 
    border: solid 1px #fff; 
    border-bottom: solid 200px #c00; 
    width: 200px; 
    -webkit-transition: all ease 1s; 

} 

#stage:hover #trapezoid { 
    border: solid 50px #fff; 
    border-bottom: solid 20px #f11; 
    width: 100px; 

}

Naturalmente, questo ha importanti avvertimenti: nel tuo esempio la carta sta cadendo in avanti, ho provato ma sembra che questo non è possibile con questa tecnica. Qualsiasi contenuto all'interno della forma non verrà trasformato, è solo la forma della carta. Oh, e la forma della carta non può avere confini. Principali inconvenienti che limitano la sua applicazione reale.

Ancora, è bello! Giocare con lui qui: http://jsfiddle.net/mxgAu/

fonte

2011-02-18 06:28:31 Duopixel

Ma non saresti in grado di mettere qualcosa al suo interno. –

Sì, ma non senza qualche trucco. Dopo aver scritto questa risposta ho scoperto che esiste già un plugin jQuery che fa questo: http://lab.smashup.it/flip/. – Duopixel

Oh merda! 3D Flipping senza CSS3 3D! http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/fx/tests/test_flip.html –

Se si utilizza IE10, allora la soluzione potrebbe essere:

.up{ 
    -ms-transform-origin: 50% 100%; 
    -ms-transform: perspective(100px) rotateX(7deg); 
} 

.down{ 
    -ms-transform-origin: 50% 0%; 
    -ms-transform: perspective(100px) rotateX(-7deg) scale(1); 
}

fonte

2012-02-21 13:59:58 frantisek

CSS3 matrix3d ​​rettangolo a trasformazione trapezoidale

risposta

Problemi correlati

CSS3 matrix3d rettangolo a trasformazione trapezoidale