Suche jemand der sowas bauen kann [Elevation]

5 Apr 2015
583
126
#3
ZeCke ZeCke würde gerne solche Grafiken wie in diesem Video gezeigt diese 3D flachgelegte in HTML nachbauen, um z.B. in Internetseiten einzubauen
 

ZeCke

Honorable
7 Jan 2015
4,074
3,291
#4
ZeCke ZeCke würde gerne solche Grafiken wie in diesem Video gezeigt diese 3D flachgelegte in HTML nachbauen, um z.B. in Internetseiten einzubauen
Du meinst die Elemente? Das sind halt desgine guidelines für Material designe an denen du dich orientieren kannst als Designer. Mit CSS machst du dass dann, sollte nicht so schwierig sein wenn du deine Layout Idee hast.
 
5 Apr 2015
583
126
#5
https://prnt.sc/kx4gqq

ich glaube wir reden etwas an einander vorbei. Ich will kein Layout erstellen, ich will "Ebenen" bauen, die genauos flach in diesem Winkel liegen beispielsweise mit Divs und CSS ,damit ich die auf ner html Seite nutzen kann.

Quasi ein Control bauen und designen das so aussieht wie diese Ebenen
 

Durek

Donator
24 Feb 2017
1,006
1,190
#6

Durek

Donator
24 Feb 2017
1,006
1,190
#8
Ja sowas kenn ich aber bin jetzt nicht der CSS Crackhead deswegen frag ich ob da jemand n snippet hat ^^
1. Wenn du es wirklich nachbauen willst musst du das ganze als Video animation machen, so wurde es auf der Seite nämlich gemacht
2. Wenn du es wirklich nachbauen willst dann versuch es doch mal, die Beispiele sind sehr einfach

Erstellst n div in dem du das Element/die Elemente erstellst die gedreht werden sollen und appliest dann halt entsprechend die rotation mit CSS. Schlecht umgesetztes Beispiel:

Code:
<style>
    #container {
        width: 100px;
        height: 100px;
        transform: rotate3d(1, 0, 1, -78deg);
        background-color: red;
    }
</style>

<div id="container">
    <p>Ich rotiere im Kreis mfg</p>
</div>
Habe gerade mal nach nem Beispiel mit Animationen gesucht und ziemlich schnell das hier gefunden: https://tympanus.net/codrops/2013/08/01/3d-effect-for-mobile-app-showcase/
Vielleicht bringts dir ja was das zu zerpflücken/zu schauen wie es funktioniert.
 

Geforce1817

Active Member
9 May 2014
385
67
#9
Das was du verlinkt hast ist ein Video und nicht nur mit CSS gemacht (was nicht heissen soll es geht mit CSS nicht).. Ich möchte dich nur darauf hinweisen das du eventuell falsch suchst.. :smile:
Ziemlich sicher das es mit CSS auch geht.. du brauchst die einzelnen Grafiken und kannst sie dann mit CSS übereinander legen (und rotieren falls verlangt) aber ich hab kein Snippet für dich wo du rei nschaeun kannst.
 
5 Apr 2015
583
126
#10
hab schon angefangen. Habe mir 3 divs übereinander gelegt und sowas hab die rotiert. Dann hab ich mir gedacht ich arbeite mit Z-Index nur leider passiert da nix hab mir dann mit Margin angefangen zu arbeiten. Es sieht noch nicht so schick aus aber es wird.

Geforce1817 Geforce1817 damit kenn ich mich 0 aus mit Video animationen nicht mal wie man die erstellt^^
 

Durek

Donator
24 Feb 2017
1,006
1,190
#11
hab schon angefangen. Habe mir 3 divs übereinander gelegt und sowas hab die rotiert. Dann hab ich mir gedacht ich arbeite mit Z-Index nur leider passiert da nix hab mir dann mit Margin angefangen zu arbeiten. Es sieht noch nicht so schick aus aber es wird.

Geforce1817 Geforce1817 damit kenn ich mich 0 aus mit Video animationen nicht mal wie man die erstellt^^
container (div der das alles beinhaltet) bekommt
Code:
position: relative;
und das element mit dem z-index, wenn es noch kein position attribute hat
Code:
position: fixed;
 
5 Apr 2015
583
126
#13
Ne muss natürlich nicht 100% gleich sein. Dachte in HTML sowas zu bauen wäre nützlicher als Bilder da man dann dort mehr machen kann.