Prostokąt CSS3 matrix3d na transformację trapezową

Próbuję użyć funkcji obsługi skryptów CSS3 transform: matrix3d(<matrix>), aby utworzyć efekt "spadającej karty". (Jedynym celem wyjściu jest chrom)Prostokąt CSS3 matrix3d na transformację trapezową

Efekt końcowy powinien przejść przez 4 etapach poniżej i kończy się w odległości poziomej linii:

enter image description here

Oto CSS mam teraz:

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

I HTML jest prosty do testowania:

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

Macierz3d w powyższym została oparta na odczycie this SO question, ale powoduje powstanie kurczącego się kwadratu, który obraca się wokół osi X zdefiniowanej przez dolną część początkowego okna.

Rozumiem, że macierz CSS 2d może generować tylko prostokąty i równoległoboki poprzez transformację pola, a nieregularne kształty wymagają operacji przekształcenia matrix3d (this był pomocny w odświeżaniu mojej zanikającej algebry liniowej!), Ale wydaje mi się, że mogę tylko do tworzenia prostokątów i równoległoboków.

Rozejrzałem się po kilku pytaniach SO oznaczonych matrix i transformation. Większość z nich nie jest oparta na CSS i nie byłem w stanie uzyskać transformacji, której pragnę.

Źródło

2011-02-10 beggs

stworzyłem narzędzie do Fiddle z wartościami transformacji CSS tutaj: http://www.duopixel.com/ stack/webkitmatrix /, ale obawiam się, że nie mogę utworzyć trapezu w Chrome. Spróbuj. – Duopixel

@Duopixel: to wspaniałe narzędzie. Potrafię zrobić trapezoid w Safari ... ale przekrzywiony na osi Y, a nie na osi X, przesuwając suwak Row-1, Column4 (suwak w prawym górnym rogu). W Chrome ten sam suwak tworzy równoległobok. Rozumiem, że powinienem przesuwać suwak Row-4, Column-3, aby utworzyć równoległobok w osi X, ale nie działa on w Safari ani w Chrome. – beggs

Może to być przydatne [skrzypce CoffeeScript] (http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/#cp_embed_ifnqH). Strona bloga, w której jest osadzona, ma również kilka użytecznych wyjaśnień. – mbomb007

-webkit-perspektywa nie działa jeszcze w Chrome (tylko Safari), więc to nie zadziała (wypróbuj swój kod w Safari). Również transformacje 3D w Chrome są generalnie nieco niepewne i nie łączą się dobrze z gradientami.

Również rotate3d (1, 0, 0, 90deg) działa równie dobrze jak macierz, aby osiągnąć to, co robisz. Notacja macierzowa to tylko krótki sposób połączenia obrotu, pochylenia, przesunięcia i początku 3D w jedną macierz. Ponieważ obracasz się tylko wokół osi X, nie musisz iść do tych długości.

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

Dokładnie to, czego potrzebujesz.

Aktualizacja: Oto link to a jsfiddle z dokładnie co szukasz, który działa zarówno w Chrome i Safari. Zwróć uwagę, że ważne jest, aby określić, że początek transformacji dla klapki jest taki sam jak początek perspektywy. Źródło pochodzenia Webkit określa miejsce, w którym "kamera" znajduje się w przestrzeni 3D w stosunku do transformacji 3D, i łatwo uzyskać niezrozumiałe wyniki, jeśli nie jesteś ostrożny.

2-ty Aktualizacja: perspektywa jest obecnie dostępna we wszystkich przeglądarkach brzegowych (chociaż anti-aliasing Firefoksa ma niewiele go polecić (i potrzebuje -moz oczywiście))

3-ty Aktualizacja: Aktualizacja skrzypce krzyżowej przeglądarki dla Firefox, IE i unprefixed.

Źródło

2011-02-10 16:11:56

Interesujące, użyłem funkcji rotateX(), ale nie zapewnia ona perspektywy, że obiekt pada do przodu. Dodałem różne ustawienia perspektywy i kluczowe klatki, ale nigdy nie mogłem uzyskać efektu 3D. Spróbuję Safari i zobaczę, co jest innego. – beggs

Próbowałem zmian perspektywy w Safari 5.0.3 (Windows) i nie ma efektu. W narzędziu, które @Duopixel wspomniał w swoim komentarzu, nie mogę uzyskać trapezu osi X, tylko osi Y w Safari, podczas gdy Chrome tworzy tylko równoległobok osi Y. Wygląda na to, że odpowiedź brzmi "nie jest możliwe". – beggs

Czytałem specyfikację przejścia CSS, gdy zauważyłem, że szerokość obramowania to , która może być animowana, a fałszywe trapezoidy można wykorzystać przy użyciu szerokości obramowania. Oznacza to, że możesz fałszować spadające karty w Chrome, Operze i 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; 

}

Oczywiście, ma to najważniejsze ostrzeżenia: w przykładzie karta spada frontward, próbowałem, ale wydaje się, nie jest to możliwe z tą techniką. Jakakolwiek zawartość wewnątrz kształtu nie zostanie przekształcona, to tylko kształt karty. Aha, a kształt karty nie może mieć żadnych granic. Główne wady, które ograniczają jego prawdziwą aplikację.

Mimo to jest całkiem fajnie! Bawić się z nim tutaj: http://jsfiddle.net/mxgAu/

Źródło

2011-02-18 06:28:31 Duopixel

Ale nie byłbyś w stanie umieścić w nim niczego. –

Tak, ale nie bez oszustwa. Po napisaniu tej odpowiedzi znalazłem już wtyczkę jQuery, która to robi: http://lab.smashup.it/flip/. – Duopixel

Oh crap! Przerzucanie 3D bez CSS3 3D! http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/fx/tests/test_flip.html –

Jeśli używasz IE10, to rozwiązanie może być:

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

Źródło

2012-02-21 13:59:58 frantisek

Prostokąt CSS3 matrix3d ​​na transformację trapezową

Odpowiedz

Powiązane problemy

Prostokąt CSS3 matrix3d na transformację trapezową