Karten in Kreis .Letzte Karte unter der ersten

Wahr heute ein bischen am rumspielen weil es hier ja ein Thema gab wegen rotate.

Jetzt habe ich Container die wie ein Kartenspiel gefächert sind.

Gibt es in Css eine möglichkeit die letze Karte unter der ersten zu stecken so das es kein Anfang und ende gibt. ?

Wenn ihr es sieht wisst ihr wie ich das meine .

Die lightgrüne Karte soll über der Orangen Karte bleiben ,aber trotzdem am anderen Ende wieder unter der roten sein.

z-index geht ja nur bis der letzten Karte ,komme aber dann nicht mehr unter der ersten.

Kennt da einer ein Trick für ? https://codepen.io/basti1012/pen/bOqXjP

Svg hatte ich mir auch schon gedacht das es damit vieleicht gehen könnte, oder mit Canvas. Ist aber beides nicht mein Thema und hatte deswegen da auch erst gar nicht irgend welche versuche mit gestartet.

Ich hatte es auch schon mit before und after versucht, doch leider kann man da wohl keine verschiedene z-index Werte geben.

Before und after haben wohl immer den gleichen z-index wie der Container selber.

Hatte gehoft das dies zumindest klappt ,aber auch noch was das ich nie versucht habe.

Habe mir eine Route gebastelt und die da versucht zwischen zu schieben, so das es optisch zumindest so aus sieht.

Das klappte nicht so besonders gut, zwar möglich,aber Mist .

Ich hatte mir gehoft das es im Css noch irgendein Trick gibt der mein Vorhaben hier kann. Habe auch schon versucht das zu ergoggeln aber konnte nix finden was ich vor habe. Wahrscheinlich falsch gesucht oder so weil kann mir nicht vorstellen das sowas noch nie einer gebaut hat .

Ich werde mir das mal mit den clip-path ankucken. Habe ich mich noch nicht mit bechäftigt aber irgendwann ist immer das erste mal und zwar jetzt.

Aber wer weiß , vieleicht findet sich da ja noch irgendein anderer Trick oder Code der das auch kann .

Jetzt kann ich mir das auch besser vorstellen wie du das meinst.Das sollte auch gehen. Doch bevor ich das versuche das in den Karten Kreis einzubauen hab eich eine Frage .

Bei einer festen größe sehe ich da jetzt kein problem mehr.

In mein Beispiel passen sich die Karten ja der größe des Bildschirms an.( VW ,VH )

In dein fiddel habe ich gesehen das die größen ohne Masseinheit angegeben werden ( Pixel ).

Kann man beim svg die Einheit ändern ,so das es auf den rest passen würde ?

mit rotate3d hatte ich auch schon ruim gespielt aber zu kein Ergebniss gekommen. Jetzt bei deinen Beispiel sieht es so aus das es ja klappen müßte, doch die Karte dazwischen zu fummeln klappte bis jetzt noch nicht . Muss ich später mal genauer versuchen, ich denke das ich irgendwas übersehen habe. Meine Harte die da rein soll bleibt immer unter der anderen ,auch wenn die ich dreht. Mit und ohne z-index komme ich da auch nicht weiter.

Wie gesagt muss das nachher noch mal versuchen , aufgeben kommt noch nicht in der Frage,erst wenn der Laptop fliegt..

jo mitlerweile läuft es bei mir auch.Warum das erst nicht geklappt hat weiß ich nicht ,wahr wohl nur ein kleiner Fehler noch versteckt.

Hätte jetzt auch nicht gedacht das es ohne großen aufwand überhaupt alles klappt.Gestern beim erstellen des Themas dachte ich noch das man das mit JS nach helfen muß. Ich hatte da ja auch schon mit rotate3d und so versucht,doch irgendwie auch falsch angesetzt.

Habe gesehen das du mitlerweile den Fiddel geändert hast. Vorher hatte jeder container noch einen Parent Container, da hatte ich mich noch gefragt warum das so ist und ob das auch ohne geht ?

Aber mitlerweile sieht das bei dir ja anders aus ohne die Parents und sieht genau so gut aus wie mit Parent.

Ich würde sagen das Thema wurde erfolgreich gelöst und ich habe was dazu gelernt.

Danke dir .

Das komische ist ja auch, das ich beim Googeln nix gefunden habe zu den problem. Vieleicht auch falsche Suchwörter eingegeben.