Hogyan készítsünk lenyűgöző 3D grafikát a CSS3-ban

A CSS3 3D átalakításai gyorsan legitim lehetőségké válnak a webprojektek mélységének és interaktivitásának növelésére. Ebben az oktatóanyagban bemutatjuk, hogyan lehetne megközelíteni a 3D-s szakasz beállításának, a 3D-s objektum építésének, az árnyékolás és az animáció hozzáadásának, valamint a dinamikus tartalom behozatalának folyamatát, hogy létrehozhasson valamit, amelyet felhasználhat a saját webhelyén. Megtanulunk néhány fejlett CSS3-funkciót és megoldunk néhány gyakori problémát.

Miért érdemes használni a CSS-t?

A 3D-s grafika HTML-ben történő létrehozásának rengeteg módja van. JS-alapú, Canvas-, SVG- és még WebGL-alapú megoldások is rendelkezésre állnak, és mindegyiknek megvan a maga előnye, de létezik CSS is. A CSS megkerüli a képek szükségességét, és képes a grafikus gyorsítás érdekében bekapcsolódni a GPU-ba. A plug-inek nem szükségesek, és a CSS túl is élhet az Ön falán lévő falon.

A perspektíva tulajdonságának beállítása drámai hatásokat produkálhat

A perspektíva tulajdonságának beállítása drámai hatásokat produkálhat

A CSS 3D nem annyira optimalizált, mint a WebGL. A böngészők is következetlenek. Ennek ellenére a 3D-s objektumok beépítése a webes projektekbe extra tengelyt ad a munkához, és ma is használható.

Nem minden böngésző támogatja teljes mértékben az ebben a cikkben használt 3D-átalakításokat, ezért a rövidség érdekében használom a -webkit előtagot. Ügyeljen arra, hogy a Mozilla, az Opera, az MS előtagokat, valamint a nem előtagú verziót illessze be. A CSS teljes verziói előtagokkal, a projekt fájlokban vannak .

Alapok: 3D kocka készítése

Első lépésként elkészítünk egy alap 3D kockát, elhelyezve és animálva azt 3D térben. Először állítottunk fel egy HTML-t, amely a 3D-s kocka darabjait ábrázolja.

Úgy döntöttem, hogy az ábra elemet használom, de lehet egy div, span vagy bármilyen típusú elem, amelyet jobban szeret. Ennek a HTML-nek két fő része van. A színpad, amelyben mindent elhelyeznek, és egy kocka, amelyet a színpadra kell helyezni.

Balra, egy div, transzformáció nélkül. Jobb, az alak 3D térben forog

Balra, egy div, transzformáció nélkül. Jobb, az alak 3D térben forog

A színpad beállítása

Az első dolog, amire szükségünk van egy 3D-s jelenet felépítésekor, egy olyan elem létrehozása, amely színpadként működik. A színpadnak mélységet adunk a CSS perspektíva tulajdonságának használatával:

.stage { width: 300px; height: 300px; -webkit-perspective: 1600px; -webkit-perspective-origin: 50% -240px; }

A perspektíva értékének magasabbra állítása finomabb 3D hatást eredményez; az alacsonyabb teszi markánsabbá. Körülbelül 800 pixel érték általában jól mutat a legtöbb apró tárgy esetében, de ha valami nagyobbat hoz létre, például felhőkarcolót, érdemes kisebb értéket használni szélsőségesebb szögek létrehozásához. A perspektíva beállításakor az X és Y tengelyben elhelyezhető perspektíva-origót (a virtuális kamera helyzetére néző helyzetét) is meg kell adni.

Formák készítése: gondolkodás síkokkal

A 3D-s alakzatok HTML és CSS használatával az objektumról sík síkok halmazára gondolunk. Ahelyett, hogy csúcsokat rajzolunk, és pontokból és vonalakból formákat állítunk össze, ahogyan azt más 3D-s programok is ismerik, ezekkel a sík síkokkal fogunk dolgozni, és mindegyiket egyenként helyezzük el. A kockát hat síkkal állítjuk össze, amelyek megfelelnek az oldalának, tetejének és aljának. Először is adja meg a figurák alakját és stílusát:

figure { display: block; position: absolute; width: 300px; height: 300px; background-color: #60c2ef; }

A következő lépés az, hogy elmondjuk nekik, hol üljenek a 3D-s térben.

A transzformátorok mennek

Az ábrákat a transzformációs tulajdonság felhasználásával helyezzük el. A CSS-ben lévő transzformációk utasítások sorozatából állnak, amelyek megadják az alakzatnak, hogy mozogjon, forogjon, ferde és méretarányos legyen. Balról jobbra olvasnak. Például:

-webkit-transform: rotateY(45deg) translateZ(-100px) rotateX(10deg)

A kocka mindkét oldalát a helyére tudjuk tolni, kezdve az elejétől és a hátuljától:

.cube { -webkit-transform-style: preserve-3d; } figure { -webkit-transform-origin: 50% 50% 0; } .front { -webkit-transform: translateZ(150px); } .back { -webkit-transform: rotateY(180deg) translateZ(150px); }

Ne feledje a transzform stílusú tulajdonság használatát: ha ez a-3d megőrzésre van állítva, akkor a kocka oldalai átalakításokat hajtanak végre a saját 3D-s térükben. Meghatározzuk azt a pontot is, amely körül az átalakítás történik. A transzformáció-origó tulajdonság az X, Y és Z tengelyben olyan pontot határoz meg, amely forgásközpontként működik. Ez az elem elejének közepe, félúton és félig lefelé.

Lapos HTML elemek a 3D-s térben

Lapos HTML elemek a 3D-s térben

Az elülső ábra 150 képpontos kifelé fordított; a hátlap 180 fokkal elfordul, és 150 képpontosan mozog a jelenet hátulja felé. A sorrend itt számít - az átalakítási szabályokat balról jobbra alkalmazzák. A hátsó ábra második transzformációja pozitív szám: forgatásakor elülső oldala a jelenet hátsó része felé néz. Mint korábban, az átalakítási szabályok sorrendje is számít. Ha egy elemet elforgatnak, akkor annak Z tengelye más szögben lesz, és minden fordítást befolyásol. Most tegye a másik oldalát:

.top { -webkit-transform: rotateX(90deg) translateZ(150px); } .bottom { -webkit-transform: rotateX(-90deg) translateZ(150px); } .left { -webkit-transform: rotateY(-90deg) translateZ(150px); } .right { -webkit-transform: rotateY(90deg) translateZ(150px); }

Most egy teljes kockánk van, 3D-s jelenetben elhelyezve.

Mozgassa, mozgassa

Nézzük, hogy 3D-s alkotásunk a színpadon forogjon CSS-animációk segítségével:

@-webkit-keyframes rotate { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); } }

A CSS animációkat kulcsképek sorozatának használatával érhetjük el. A kulcsképek az objektumok állapotainak halmaza, százalékok felhasználásával állítva. Az animáció nulla forgatással kezdődik, és az Y tengely körül teljesen elforgatva fejeződik be. Alkalmazza ezt a kulcsképet az animációs tulajdonsággal:

.cube { -webkit-animation: rotate 10s infinite linear; }

Az itt alkalmazott rotációs animáció 10 másodpercig fog futni, a végtelenségig ismételje és egyenletes lineáris ütemben mozogjon.

Hat HTML elemből létrehozott teljes kocka

Hat HTML elemből létrehozott teljes kocka

Árnyékolás

Van egy kockánk, amely a színpadon forog, de nagyon világos. Az árnyékolás hozzáadásához további szelektorok hozzáadása nélkül álválasztókat használunk.

Az álszelektorok olyanok, mint az extra HTML elemek, amelyeket be lehet illeszteni egy elem tartalma elé és után. További elemeket adnak a munkánkhoz, és tartalmazhatnak színátmeneteket, színeket vagy akár szöveget is. Tehát animálhatjuk az árnyékolást a kocka mindegyik felületén, két gradiensre van szükségünk - az egyik akkor, amikor a felület balra fordul, a másik pedig jobbra:

figure:before, figure:after { content: ''; display: block; position: absolute; width: 100%; height: 100%; opacity: 0; } figure:before { background: -webkit-radial-gradient(top left, rgba(0, 0, 0, 0.5), #000000); } figure:after { background: -webkit-radial-gradient(top right, rgba(0, 0, 0, 0.5), #000000); }

Ebben a példában az előtte és utána az álválasztók találhatók, amelyek stílusosan és animálhatók. Fontos megjegyezni ez még nem támogatott - A Chrome, a Firefox és az IE10 különböző szintű támogatást kínál - és remélhetőleg ez javulni fog. Minden egyes álválasztóra animációt alkalmazunk, hogy időzítsük a színátmenetek megjelenítését / elrejtését:

.front:before { -webkit-animation: frontShading1 10s infinite linear; } ...

Minden animáció kulcsképekből áll, amelyek animálva mutatják vagy elrejtik a színátmenetet. Íme kettő, ami a hátoldalra vonatkozik:

@-webkit-keyframes frontShading1 { 2% { opacity: 0; } 25% { opacity: 0.8; } 35% { opacity: 0.8; } 50% { opacity: 0; } } ...

Az animációk teljes készletét, az egyes böngészők előtagjaival együtt, a projektfájlok tartalmazzák.

Teteje és alja

Ezután a felső és az alsó. A csúcsnak olyan gradiensre van szüksége, amely úgy néz ki, mintha nem mozdulna. Helyezzen egy színátmenetet a tetejére, és fordítsa el az ellenkező irányba:

.top:after { opacity: 0.5; width: 200%; height: 200%; margin-left: -50%; margin-top: -50%; background: -webkit-radial-gradient(bottom, rgba(0, 0, 0, 0), #000000); -webkit-animation: rotateTop 10s infinite linear; } @-webkit-keyframes rotateTop { 0% { -webkit-transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); } }

A kocka alja nem lesz látható, de fel tudjuk használni egy doboz-árnyék hozzáadására:

.bottom { -webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0); }

Az árnyékolás érzésmélységet ad az egyébként lapos jelenethez

Az árnyékolás érzésmélységet ad az egyébként lapos jelenethez

Több, mint lapos színek

Eddig egy kockát hoztunk létre, árnyékoltunk és animáltunk, csak CSS-t használva, bár lapos színekkel az oldalán. Mivel HTML elemekkel dolgozunk, sokkal többet tehetünk a tartalommal.

A kocka arcai képeket, szöveget - vagy akár más animációt - tartalmazhatnak. Az alábbi példában néhány háttérképet alkalmaztam a Minecraft játékból:

figure { background-image: url(../images/mc_side.png); background-size: 100%; } .top { background-image: url(../images/mc_top.png); }

A korábban hozzáadott árnyékolás itt is érvényben van, jobb mélységérzetet adva az oldalaknak. Bármilyen tartalommal fog működni az ábra.

Gondolatok

Mintha az animált árnyékolás és az árnyék nem lenne elegendő, valamivel több fényt adhatunk a jelenetnek néhány divatos WebKit szűrő segítségével (vegye figyelembe, hogy ez jelenleg csak a WebKit szolgáltatás).

figure { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(RGBA(0, 0, 0, 0.1))); }

Tweet doboz

Készítsünk valami praktikusabbat. Ebben a példában a kockát egy olyan helyre tesszük, ahol megmutathatja a legfrissebb tweetjét, és néhány másodlagos információt elhelyezünk a kocka oldalán azzal a lehetőséggel, hogy az emberek kövessék Önt a Twitteren.

A HTML beállítása

A korábbival megegyező HTML-kóddal kezdve néhány háttérképet alkalmazunk, hogy textúrája legyen. Ezt a két textúrát alkalmazzuk a kockára:

figure { background-color: #eeeeee; background: url(../images/white-noise.jpg); } .front { background: #e0e0e0 url(../images/net-logo.jpg) no-repeat;

Adjon hozzá tartalmat

Adja hozzá azt a tartalmat, amely a kocka megfordulásakor megtekinthető. A kocka jobb oldalán fog menni. Tartalmazzon egy kis JavaScript-t a híváshoz a követés gombra (a következő címen szerezhető be: Twitter gomb oldala ). Az osztályjoggal rendelkező ábrának ilyet kell tartalmaznia:

The world's best selling magazine for web designers and developers since 1994

Follow @netmag !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

A követés gomb úgy helyezkedik el, hogy iframe szabályt ad hozzá a CSS-hez:

.right iframe { padding-left: 90px; margin-top: -30px; }

Ha háttérképeket ad a HTML elemekhez, gazdagabb jelenetet hoz létre

Ha háttérképeket ad a HTML elemekhez, gazdagabb jelenetet hoz létre

Tegyen egy tweetet rá

A Twitter egyszerű módszert kínál a legfrissebb tweetek widgetek formájában történő megszerzésére. Az egyik beállításához jelentkezzen be a Twitterre, és navigáljon a Twitter Widgetek oldal . Kattintson az Új létrehozás gombra, majd írja be a kívánt Twitter felhasználónevet a Felhasználónév mezőbe (itt a 'netmag' szót fogjuk használni). A beágyazási kód létrehozásához nyomja meg a Widget létrehozása gombot.

Stílusolhatjuk a modult, és hozzáadhatunk egy szélességet, magasságot és néhány adatértéket a kódba. Cserélje le a YOUR_WIDGET_ID azonosítót a beágyazási kódban megadott azonosítóra:

!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');

Átmenet

Az árnyékoláshoz nincs szükségünk kulcsképes animációkra: az lebegő vagy aktív eseményre reagál. Ehelyett adjon néhány átmenetet az árnyékoló álválasztókra:

.right:before { opacity: 0.4; -webkit-transition: all 0.4s ease; } .right:after { display: none; } .front:before { opacity: 0.1; -webkit-transition: all 0.4s ease; } .front:after { display: none; }

A jobb oldali álválasztó opacitása 0,4. Ez egy kis árnyékot ad, és animálhatjuk az átlátszatlanságot, hogy az arc könnyebbé váljon, amikor elöl fordul. Jobbra: miután az álválasztó el van rejtve, mivel nem forgatjuk el a kockát annyira, hogy szükség legyen rá. Az elülső arc némi árnyékolást kap, bár világosabb, mint a jobb oldali, mivel előre néz.

Az Y tengely körül forgó 3D kocka

Az Y tengely körül forgó 3D kocka

Animáció lebeg

A hozzáadott árnyékoló effektusokkal animált „kukucskáló” hatást építünk, amikor a felhasználó a kocka felett lebeg, és ezt a CSS lebegő állapotának felhasználásával érjük el.

.cube:hover { -webkit-transform: rotateY(-50deg); -webkit-transition: all 0.4s ease; } .cube:hover figure.right:before, .cube:hover figure.front:before { opacity: 0.2; -webkit-transition: all 0.4s ease; }

Lebegve a kocka 50 fokkal balra forog. Ez a transzformáció zökkenőmentes átmenetté válik az átmeneti tulajdonság alkalmazásával. Ezzel egyidejűleg az elülső és a jobb oldali álszelektorokat átlátszatlanságra állítják át.

Ezeknek az átállásoknak az eredménye egy szép 3D-s fordulóhatás, amely lehetővé teszi az extra tartalom elrejtését a szem elől, és megmutatja, amikor a felhasználó a kocka fölé viszi az egeret. A teljes HTML és CSS megtalálható a projekt fájlokban.

Háromdimenziós

Háromdimenziós 'tweet box', amely további információkat mutat a lebegésről

Az objektumok sima HTML elemekből való készítésének vannak korlátai: minden létrehozott objektumot lapos alakzatok kombinálásával kell elkészíteni a végeredmény előállításához. Ívelt tárgyakat, például csöveket és gömböket nehéz sok elem felhasználása nélkül létrehozni, ezért a legegyszerűbb az egyszerűbb tárgyakhoz. De az árnyékolás és az animáció megfontolt használata egyszerűbb felépítéssel lenyűgöző eredményeket hozhat létre.

Teljesítmény és tesztelés

A 3D-s objektumok létrehozásakor ne feledje, hogy a böngésző teljesítménye és a számítógép sebessége nagyon változhat. A CSS nem igazán van optimalizálva grafikusan intenzív, forgalmas 3D-s jelenetekre, ezért a nyilvános projekteknél ajánlott a mérlegelés. Tesztelés különböző platformokon: a látogatók valószínűleg mobileszközöket vagy régebbi, lassabb számítógépeket használnak.

Bár csak idő kérdése, amíg az összes böngésző támogatja a 3D-s átalakításokat, színátmeneteket és az itt használt összes szép simítást, a valóság az, hogy a legtöbb még nincs ott. Gondoskodnunk kell arról, hogy a régebbi böngészőket használó látogatók ne találjanak hibás oldalt. Az egyik megközelítés a szolgáltatásészlelés használata, és egy alternatív változat megjelenítése azoknak a böngészőknek, amelyek nem támogatják ezeket a tulajdonságokat.

Ebben az esetben használjuk Modernizr annak észlelésére, hogy a 3D-átalakítások támogatottak-e, és ha nem, akkor statikus képet jelenítünk meg. Először illessze be a Modernizr JS-jét a HTML fejlécébe:

Betöltéskor ez egy csstransforms3d osztályt illeszt be a címkébe. Ezután ezeket az információkat felhasználjuk egy tartalék alternatíva megjelenítésére vagy elrejtésére:

.stage { display: none; } .csstransforms3d .stage { display: block; } .fallback-stage { width: 100%; height: 600px; background: url(../images/fallback.png); } .csstransforms3d .fallback-stage { display: none; }

Ebben a példában a tartalék statikus kép. Használja a tartalék div lehetőséget, hogy bemutassa a böngésző lapos tartalmát vagy egy alternatív üzenetet.

A 3D-s tweet doboz oldalain alkalmazott textúrák

A 3D-s tweet doboz oldalain alkalmazott textúrák

Következő lépések

Valószínűleg nem a 3D-s stílusú kocka kéri a legtöbb webdesign-ügyfelet, de ezek közül a technikák közül néhány más módon is felhasználható. Létrehozhat egy 3D átmenet lebegő hatást egy logón, egy mutatós módot egy új termék bemutatására, vagy felhasználhatja az összetett adatsorok bemutatásához és navigálásához. A Z-tengely bevezetése a tervekbe érdekes és szórakoztató ötleteket tárhat elénk.

Szavak: Donovan Hutchinson . Donovan egy dublini székhelyű front-end tervező. Szakterülete az interakciótervezés és a CSS-ről és más front-end fejlesztésekről szóló blogok.

Köszönet Val Head az oktatóanyag szakértői értékeléséhez. Ez a cikk eredetileg itt jelent meg net magazin 244. szám .

Tetszett ez? Olvassa el ezeket!