Grafika 3D Animacja WEB

Animacja Kwadratów na stronie internetowej w 3D

💯Projekt jest zrobiony w HTML5 i CSS3. Informacje na potrzeby projektu. Wszystko opiera się na ‘nth-child’ oraz animacji . Trzeba zaznaczyc, że robimy to ‘transform-style: preserve-3d;’ Zaznaczyłem położenie ‘transform: perspective(700px) rotateX(40deg);’ Wielkość pola i kąt położenia na monitorze. Można to zmieniać za sprawą ‘ deg’.

Użyty jest element FLEX .

Właściwość CSS flex, flex – wrap określa, czy elementy flex są wymuszane na jednej linii, czy mogą być zawijane na wielu liniach. Jeśli owijanie jest dozwolone, ustawia kierunek układania linii.

Flexbox to nowa technologia która już ma szerokie wsparcie wśród przeglądarek, dlatego jego używanie staje się coraz bardziej powszechne. Flexbox wykorzystuje narzędzia, które pozwalają na szybkie tworzenie kompleksowego i eastycznego układu strony. Flexbox to jednowymiarowa metoda rozmiaszczania elementów w wierszach lub kolumnach, przedmioty rozciągają się aby wypełnić dodatkową przestrzeń lub kurczą sie aby dopasować się do mniejszych przestrzeni. W tym artykule zawarto podstawowe informacje na ten temat.

See the Pen Animation Rectangle CSS by Graphic2d3d (@Graphic2d3d) on CodePen.