DARMOWE NARZĘDZIE

Generator CSS Isometric Cube

Twórz sześciany i figury izometryczne w czystym CSS. Ustal kolory ścian, rozmiar i kąt. Kopiuj gotowy kod. Bezpłatnie online. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Output mode

Prefix

Size

Perspective

Rot x

Rot y

Rot z

Kolorów top

Kolorów bottom

Kolorów front

Kolorów back

Kolorów right

Kolorów left

Border width

Border kolorów

Opacity

Bg kolorów

Shadow enable Opcja narzędzia

Shadow x

Shadow y

Shadow blur

Shadow opacity

Shadow kolorów

Custom css

78 znaków

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator CSS Isometric Cube online

Efekt izometryczny (rzut 3D pod kątem 30°/45°) jest modny w ilustracjach i grafikach UI. Generator tworzy sześcian CSS bez SVG ani WebGL — tylko transformacje CSS.

CSS 3D izometryczny CSS sześcian CSS CSS transform

Jak to działa

Trzy ścianki (górna, lewa, prawa) są prostokątami z transform: rotate i skewY tworzącymi złudzenie głębi. Kolory ścian dobierasz niezależnie.

Zastosowania

Ikony produktów, infografiki architektoniczne, dekoracje stron landing page, elementy pixel-art w stylu gier izometrycznych.

Najczęstsze pytania

Czy mogę animować obrót?

Tak — generator opcjonalnie dodaje animację @keyframes obracającą cały sześcian.

Czy działa na starszych przeglądarkach?

transform: skewY i rotateX są obsługiwane od IE10+; nowoczesne przeglądarki bez problemów.

Jak zrobić wiele sześcianów obok siebie?

Wygeneruj kilka wariacji z różnymi rozmiarami i kolorami, ułóż je przez Flexbox lub Grid.

Inne efekty 3D CSS znajdziesz w generatorze claymorphism i neumorphism.