Generator izometrycznego sześcianu CSS
Twórz izometryczny sześcian 3D w czystym CSS z transformacjami. Podgląd i gotowy kod transform — za darmo online.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Rozmiar kodu CSS
dokładnie ten arkusz zapisuje „Pobierz .css”
Krawędź sześcianu
--cube-size; każda ściana ma 140 × 140 px
Perspektywa
ustawiana na scenie .iso-scene
Obrót X
pełna izometria to 54,7356°
Obrót Y
pełna izometria to 45°
Przezroczystość ścian
1 = pełne wypełnienie ścian
Obramowanie ścian
kolor #1f2937
Cień sześcianu
drop-shadow(0px 18px 38px)
Kolor góry
przód #35c9a8, prawa #2d6cdf
<style>
/* Wygenerowano przez Toolsti — Generator izometrycznego sześcianu CSS */
.iso-scene {
--cube-size: 140px;
--cube-half: 70px;
--cube-perspective: 900px;
--cube-rot-x: 54.7356deg;
--cube-rot-y: 45deg;
--cube-rot-z: 0deg;
--face-top: #f7c948;
--face-right: #2d6cdf;
--face-left: #1b4d89;
--face-front: #35c9a8;
--face-back: #0f766e;
--face-bottom: #0b1320;
--border-width: 1px;
--border-color: #1f2937;
--face-opacity: 1;
--preview-bg: #f8fafc;
--cube-filter: drop-shadow(0px 18px 38px rgba(0, 0, 0, 0.25));
width: calc(var(--cube-size) * 2);
height: calc(var(--cube-size) * 2);
display: grid;
place-items: center;
perspective: var(--cube-perspective);
background: var(--preview-bg);
border-radius: 18px;
padding: 18px;
overflow: hidden;
}
.iso-cube {
position: relative;
width: var(--cube-size);
height: var(--cube-size);
transform-style: preserve-3d;
transform: rotateX(var(--cube-rot-x)) rotateY(var(--cube-rot-y)) rotateZ(var(--cube-rot-z));
filter: var(--cube-filter);
}
.iso-face {
position: absolute;
inset: 0;
width: var(--cube-size);
height: var(--cube-size);
box-sizing: border-box;
border: var(--border-width) solid var(--border-color);
opacity: var(--face-opacity);
backface-visibility: hidden;
}
.iso-front { background: var(--face-front); transform: translateZ(var(--cube-half)); }
.iso-back { background: var(--face-back); transform: rotateY(180deg) translateZ(var(--cube-half)); }
.iso-right { background: var(--face-right); transform: rotateY(90deg) translateZ(var(--cube-half)); }
.iso-left { background: var(--face-left); transform: rotateY(-90deg) translateZ(var(--cube-half)); }
.iso-top { background: var(--face-top); transform: rotateX(90deg) translateZ(var(--cube-half)); }
.iso-bottom { background: var(--face-bottom); transform: rotateX(-90deg) translateZ(var(--cube-half)); }
/* Własny CSS */
/* Opcjonalnie: dodaj tutaj własne reguły (gradienty, animacje, stany hover). */
</style>
<div class="iso-scene" aria-hidden="true">
<div class="iso-cube">
<div class="iso-face iso-front"></div>
<div class="iso-face iso-back"></div>
<div class="iso-face iso-right"></div>
<div class="iso-face iso-left"></div>
<div class="iso-face iso-top"></div>
<div class="iso-face iso-bottom"></div>
</div>
</div>
Sześcian to sześć absolutnie pozycjonowanych ścian w kontenerze z transform-style: preserve-3d. Wszystkie wymiary, kolory i obroty siedzą w zmiennych CSS na scenie .iso-scene — wystarczy nadpisać zmienną, żeby przestroić figurę bez ruszania reszty arkusza.
| Fragment CSS | Dokładny zapis z silnika | Rola |
|---|---|---|
| scena .iso-scene | width/height: calc(var(--cube-size) * 2); display: grid; place-items: center; perspective: var(--cube-perspective); |
scena wyśrodkowuje figurę i ustawia perspektywę; --cube-size to rozmiar krawędzi z formularza |
| sześcian .iso-cube | transform-style: preserve-3d; transform: rotateX(var(--cube-rot-x)) rotateY(var(--cube-rot-y)) rotateZ(var(--cube-rot-z)); |
preserve-3d utrzymuje przestrzeń 3D; kolejność obrotów X → Y → Z jest istotna dla widoku izometrycznego |
| ściana .iso-face (wspólne) | position: absolute; inset: 0; border: var(--border-width) solid var(--border-color); opacity: var(--face-opacity); backface-visibility: hidden; |
jeden blok stylów dla wszystkich 6 ścian; backface-visibility chowa lustrzane odbicia ścian |
| cień sześcianu | filter: var(--cube-filter) → drop-shadow({X}px {Y}px {B}px rgba({R}, {G}, {B2}, {A})) |
budowany tylko przy opcji „Włącz cień” (kolor konwertowany z HEX na rgba); bez cienia silnik wpisuje none |
| własny CSS | dopisywany na końcu arkusza po komentarzu „/* Własny CSS */” |
pole „Własny CSS” trafia 1:1 do wyniku — tu dodasz animacje, gradienty czy stany hover |
| Ściana | Transform z silnika | Kolor (zmienna + pole formularza) |
|---|---|---|
| przód | transform: translateZ(var(--cube-half)); |
--face-front — pole „Kolor przodu” |
| tył | transform: rotateY(180deg) translateZ(var(--cube-half)); |
--face-back — pole „Kolor tyłu” |
| prawa | transform: rotateY(90deg) translateZ(var(--cube-half)); |
--face-right — pole „Kolor prawej strony” |
| lewa | transform: rotateY(-90deg) translateZ(var(--cube-half)); |
--face-left — pole „Kolor lewej strony” |
| góra | transform: rotateX(90deg) translateZ(var(--cube-half)); |
--face-top — pole „Kolor góry” |
| dół | transform: rotateX(-90deg) translateZ(var(--cube-half)); |
--face-bottom — pole „Kolor dołu” |
Wzorzec jest wspólny dla wszystkich ścian: obrót w osi, a potem wysunięcie translateZ o pół krawędzi (--cube-half = rozmiar ÷ 2) — dzięki temu każda ściana trafia na krawędź bryły. Ściana bez obrotu (przód) tylko się wysuwa.
Sześcian 3D a wydajność — co warto wiedzieć
preserve-3d i warstwy GPU
Każda ściana to osobna warstwa kompozytowana, a do tego dochodzi filter z cieniem. Animuj wyłącznie transform sześciana (obrót), nigdy filter — drop-shadow przeliczany co klatkę potrafi zjeść budżet klatki na słabszych urządzeniach.
Perspektywa i scena
perspective siedzi na scenie (rodzicu), nie na sześcianie — inaczej każda ściana dostaje własny punkt zbiegu i bryła się rozjedzie. Im większa wartość, tym mniej wyraźna głębia; overflow: hidden na scenie przycina narożniki wystające przy dużych obrotach.
Przezroczystość i backface
Generowany kod ma backface-visibility: hidden — bez tego przy przezroczystości < 1 widać nakładające się lustra ścian. Pamiętaj też, że opacity mniejsze od 1 wymusza mieszanie 6 półprzezroczystych warstw; przy wartości 1 przeglądarka renderuje tylko wierzchnie ściany.
Wskazówka: kafelki nad wynikiem pokazują na żywo krawędź, perspektywę, obroty i rozmiar kodu, a „Pobierz .css” zapisuje czysty arkusz do wklejenia w projekt.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator izometrycznego sześcianu CSS — projektuj efektowne elementy 3D w czystym kodzie
Generator izometrycznego sześcianu CSS to innowacyjne i w pełni bezpłatne narzędzie online, stworzone z myślą o projektantach interfejsów oraz programistach front-end, którzy chcą wzbogacić swoje projekty o zaawansowane trójwymiarowe elementy wizualne bez konieczności ładowania ciężkich bibliotek graficznych 3D.
Rola projektowania izometrycznego w nowoczesnym web designie
Rysunek izometryczny oraz rzuty trójwymiarowe od lat cieszą się niesłabnącą popularnością w świecie cyfrowego designu. Pozwalają one na przedstawienie głębi i trójwymiarowości obiektów na płaskim ekranie komputera lub smartfona bez konieczności stosowania skomplikowanej perspektywy zbieżnej. W kontekście tworzenia stron internetowych, izometryczne sześciany CSS stanowią doskonały element dekoracyjny, tło dla sekcji bohaterów (hero section), interaktywne przyciski czy oryginalne kafelki nawigacji. Dzięki nim witryna zyskuje nowoczesny, technologiczny charakter, który przyciąga uwagę użytkowników i wyróżnia markę na tle konkurencji. Ręczne pisanie kodu CSS odpowiedzialnego za prawidłowe pozycjonowanie ścianek w przestrzeni 3D bywa jednak niezwykle czasochłonne, dlatego automatyzacja tego procesu za pomocą generatora jest nieocenioną pomocą w codziennej pracy programisty.
Jak działa generowanie sześcianu 3D za pomocą transformacji CSS3?
Tworzenie obiektów trójwymiarowych w języku CSS opiera się na zaawansowanych właściwościach z rodziny CSS Transforms. Kluczowym elementem jest zdefiniowanie kontenera nadrzędnego z właściwością określającą głębię perspektywy oraz włączenie zachowania przestrzeni trójwymiarowej dla elementów potomnych za pomocą reguły transform-style z wartością preserve-3d. Sam sześcian składa się z sześciu oddzielnych elementów HTML, które reprezentują poszczególne ścianki: przednią, tylną, lewą, prawą, górną i dolną. Każda z tych ścianek jest odpowiednio przesuwana w osi Z oraz obracana w osiach X i Y za pomocą funkcji translate3d oraz rotate3d. Nasz generator precyzyjnie oblicza wszystkie te przesunięcia i kąty obrotu na podstawie podanych przez Ciebie wymiarów sześcianu, dzięki czemu otrzymujesz gotowy, w pełni zoptymalizowany arkusz stylów CSS oraz strukturę HTML, które wystarczy skopiować i wkleić do swojego projektu.
Dostosowywanie parametrów wizualnych i animacji sześcianu w czasie rzeczywistym
Nasz generator oferuje szeroki wachlarz opcji personalizacji, pozwalając na pełną kontrolę nad wyglądem każdego aspektu trójwymiarowej bryły. Użytkownik może z łatwością modyfikować wysokość, szerokość oraz głębokość sześcianu, dopasowując go idealnie do układu siatki swojej strony internetowej. Narzędzie umożliwia również definiowanie indywidualnych kolorów lub gradientów dla każdej ścianki osobno, co pozwala na uzyskanie realistycznego efektu padania światła i cieniowania. Ponadto, możesz włączyć automatyczne animacje obrotu w wybranej osi, ustawić prędkość rotacji oraz dodać efekty przejścia po najechaniu kursorem myszy (hover effects), co sprawi, że sześcian stanie się interaktywny i będzie dynamicznie reagował na działania użytkownika odwiedzającego stronę.
Wydajność czystego CSS w porównaniu z bibliotekami JavaScript
Zastosowanie czystego kodu CSS do renderowania prostych obiektów trójwymiarowych, takich jak sześciany, niesie ze sobą olbrzymie korzyści wydajnościowe. Popularne biblioteki JavaScript dedykowane grafice 3D, takie jak Three.js, ważą często setki kilobajtów i wymagają znacznych zasobów procesora oraz karty graficznej do działania. CSS3 korzysta z akceleracji sprzętowej GPU komputera lub telefonu użytkownika, co oznacza, że renderowanie animacji przebiega płynnie i bez jakichkolwiek zacięć, nawet na starszych urządzeniach mobilnych. Co więcej, brak konieczności pobierania dodatkowych plików skryptów znacznie przyspiesza czas ładowania strony, co pozytywnie wpływa na wskaźniki Core Web Vitals oraz pozycjonowanie witryny w wyszukiwarce Google.
Najczęściej zadawane pytania
Jak osadzić wygenerowany sześcian izometryczny CSS na swojej stronie?
Aby dodać sześcian do swojej strony, wystarczy skopiować wygenerowany kod HTML i wkleić go w sekcji body swojej witryny, a następnie skopiować wygenerowane style CSS i dodać je do swojego arkusza stylów. Obiekt od razu pojawi się na ekranie.
Czy trójwymiarowy sześcian CSS działa poprawnie na telefonach komórkowych?
Tak, nowoczesne przeglądarki internetowe na urządzeniach mobilnych w pełni wspierają transformacje CSS 3D oraz akcelerację sprzętową GPU. Sześcian będzie wyświetlać się płynnie i poprawnie zarówno na systemach Android, jak i iOS.
Czy mogę zmienić kolor poszczególnych ścianek sześcianu?
Tak, generator umożliwia pełną personalizację kolorystyczną. Możesz określić odrębny kolor, stopień przezroczystości lub gradient dla każdej z sześciu ścianek, co pozwala uzyskać bardzo realistyczne efekty oświetlenia przestrzennego.
Jak dodać efekt interakcji po najechaniu myszką (hover)?
W wygenerowanym kodzie CSS możesz w prosty sposób zmodyfikować reguły powiązane z pseudoklasą :hover. Na przykład, możesz ustawić zmianę kąta obrotu lub powiększenie sześcianu, gdy użytkownik najedzie na niego kursorem myszy.
Czy do działania sześcianu potrzebna jest biblioteka Three.js?
Nie, wygenerowany sześcian działa w oparciu o czysty kod HTML i CSS. Nie wymaga żadnych zewnętrznych bibliotek, skryptów JavaScript ani frameworków, co gwarantuje maksymalną lekkość i szybkość ładowania elementu.