విషయము
- మొదలు అవుతున్న
- టర్న్ టేబుల్ యొక్క ఆధారాన్ని సృష్టించడం
- పాదాలను సృష్టించడం
- చేయి మరియు తల
- రంగులు మరియు అల్లికలు
- రెండరింగ్ మరియు ఎగుమతి
- లోగోను పూర్తి చేస్తోంది
- లోగోను యానిమేట్ చేయండి
వెబ్‌లో 3 డి యానిమేషన్‌ను రూపొందించడానికి అనేక మార్గాలు ఉన్నాయి, వాటిలో చాలా వరకు జావాస్క్రిప్ట్ మరియు వెబ్‌జిఎల్ గురించి మంచి జ్ఞానం అవసరం లేదా ఫ్లాష్ వంటి ప్లగ్-ఇన్ వాడకం అవసరం. CSS 3D పరివర్తనలకు ధన్యవాదాలు, HTML మరియు CSS మాత్రమే ఉపయోగించి 3D ని సృష్టించడం సాధ్యమే, కాని అలా చేయడం అంత సులభం కాదు. ట్రిడివ్, నా ఉచిత ఆన్‌లైన్ అనువర్తనం, ప్రక్రియను సులభతరం చేస్తుంది, సరళమైన మరియు స్పష్టమైన WYSIWYG ఇంటర్‌ఫేస్‌ను అందిస్తుంది, ఇది వినియోగదారులకు ఒకే లైన్ కోడ్ వ్రాయకుండా 3D వస్తువులను సృష్టించడానికి వీలు కల్పిస్తుంది.
ఈ ట్యుటోరియల్‌లో, మేము HTML మరియు CSS లను మాత్రమే ఉపయోగించి కల్పిత రికార్డ్ లేబుల్ అయిన ‘ట్రిడివ్ రికార్డ్స్’ కోసం లోగోను సృష్టించాము మరియు యానిమేట్ చేయబోతున్నాము. లోగో కోసం ప్రధాన విజువల్ త్రిడివ్ ఉపయోగించి 3D లో సృష్టించబడుతుంది. అప్పుడు మేము సాధారణ HTML మరియు CSS ఉపయోగించి టైపోగ్రాఫిక్ అంశాలను జోడిస్తాము.
తుది యానిమేషన్ మరియు దానిని ఉత్పత్తి చేసే కోడ్‌ను మీరు ఇక్కడ చూడవచ్చు.
మొదలు అవుతున్న
త్రిడివ్ ఉపయోగించి 3D లో టర్న్ టేబుల్‌ను సృష్టించడం ద్వారా మేము ప్రారంభించబోతున్నాము. Tridiv.com కు వెళ్లి అనువర్తనాన్ని ప్రారంభించండి. మీరు Chrome, Safari లేదా Opera 15 (లేదా తరువాత) ఉపయోగించాల్సి ఉంటుంది.
ప్రారంభించడానికి ముందు, ట్రిడివ్ ఇంటర్‌ఫేస్‌ను అర్థం చేసుకోవడం ముఖ్యం. ఎడిటర్ యొక్క ప్రధాన విభాగం నాలుగు వీక్షణలతో కూడి ఉంటుంది: ఎగువ ఎడమ వైపున 3D వీక్షణ ఉంది, ఇది దృశ్యం యొక్క పూర్తి వీక్షణను అందిస్తుంది. మిగతా మూడు వీక్షణలు పై, వైపు మరియు ముందు నుండి చూపిస్తాయి. ఈ మూడు వీక్షణలను ఉపయోగించి, మీరు 3D ఆకృతులను సృష్టించవచ్చు, సవరించవచ్చు మరియు తరలించవచ్చు.
క్షితిజ సమాంతర ఉపకరణపట్టీ రెండు భాగాలుగా విభజించబడింది: ఎడమ భాగం మీ పత్రానికి సంబంధించిన సమాచారాన్ని ప్రదర్శిస్తుంది; కుడి భాగంలో ఆకృతులను సృష్టించడానికి మరియు సవరించడానికి సాధనాలు ఉన్నాయి. ది కదలిక ఎంపిక మరియు సవరించండి ఎంపిక బటన్లు వేర్వేరు ఎడిటింగ్ మోడ్‌ల మధ్య మారతాయి.
లక్షణాల పేన్ (సైడ్‌బార్) జూమ్ మరియు స్నాప్ టు గ్రిడ్ వంటి డాక్యుమెంట్ సెట్టింగులను ప్రదర్శిస్తుంది మరియు ఎంచుకున్న ఆకారం యొక్క లక్షణాలు (పరిమాణం, స్థానం, భ్రమణం, రంగు మరియు మొదలైనవి). కొలతలు మరియు స్థానం కోసం ఉపయోగించే యూనిట్ ems; భ్రమణ కోణాలు డిగ్రీలలో ఉంటాయి.
తరువాత ట్యుటోరియల్‌లో ఎటువంటి గందరగోళాన్ని నివారించడానికి, మేము ఈ క్రింది సంక్షిప్తలిపిని ఉపయోగించబోతున్నాము:
w = వెడల్పు h = ఎత్తు d = లోతు డైమ్ = వ్యాసం x డిగ్రీ = x- అక్షంలో భ్రమణం y deg = y- అక్షంలో భ్రమణం z deg = z- అక్షంలో భ్రమణం
టర్న్ టేబుల్ యొక్క ఆధారాన్ని సృష్టించడం
జూమ్ విలువను 200 కు సెట్ చేయడం ద్వారా ప్రారంభించండి. ఆకృతులను గీయడానికి సహాయపడటానికి, స్నాప్‌ను గ్రిడ్ సెట్టింగ్‌కు సక్రియం చేయండి పత్ర సెట్టింగులు సైడ్‌బార్ యొక్క విభాగం. స్నాప్ విలువను దీనికి సెట్ చేయండి 0.125.
టర్న్ టేబుల్ యొక్క బేస్ సాధారణ క్యూబాయిడ్తో కూడి ఉంటుంది, కాబట్టి క్లిక్ చేయండి క్యూబాయిడ్ జోడించండి ఎగువ ఉపకరణపట్టీలోని బటన్. ఎడిటర్‌లోని నాలుగు వీక్షణల్లో క్యూబాయిడ్ కనిపించడాన్ని మీరు చూడాలి.
ఆకారానికి పేరు మార్చండి బేస్ లక్షణాల పేన్ యొక్క పేరు ఫీల్డ్‌ను ఉపయోగించి (కింద ఆకార లక్షణాలు). ఆకారం యొక్క పేరు చెల్లుబాటు అయ్యే CSS తరగతి పేరు అయి ఉండాలి ఎందుకంటే ఇది ఎడిటర్ సృష్టించిన కోడ్‌లో ఉపయోగించబడుతుంది. లోగోను యానిమేట్ చేసేటప్పుడు మేము ఈ తరగతి పేర్లను తరువాత ఉపయోగిస్తాము, కాబట్టి మీరు సరిగ్గా సృష్టించే ప్రతి కొత్త ఆకృతికి మీరు పేరు పెట్టారని నిర్ధారించుకోండి.
క్యూబాయిడ్ పేరు పెట్టబడిన తర్వాత, అది ఎగువ వీక్షణలో ఎంచుకోబడిందని నిర్ధారించుకోండి (ఇది నీలం రంగులో హైలైట్ చేయాలి, దాని చుట్టూ ఉన్న వృత్తాకార ఉపకరణాలతో), ఆపై క్లిక్ చేయండి సవరించండి సవరణ హ్యాండిల్స్‌ని చూపించడానికి రింగ్ ఎగువన ఉన్న బటన్. వెడల్పు మరియు లోతు చేరే వరకు క్యూబాయిడ్ వైపులా నియంత్రణ హ్యాండిల్స్‌ను లాగండి w = 10 మరియు d = 8 లో ఆకార లక్షణాలు.
సైడ్ వ్యూ లోపల ఆకారంపై క్లిక్ చేయండి. ఇది ఈ వీక్షణలో ఎడిటింగ్ హ్యాండిల్స్‌ని చూపుతుంది, దీని ఎత్తును మార్చడానికి అనుమతిస్తుంది. ఎత్తు చేరే వరకు దాన్ని సర్దుబాటు చేయండి h = 2. మీరు లక్షణాల పేన్‌లో నేరుగా విలువలను టైప్ చేయవచ్చు. క్యూబాయిడ్ యొక్క మూలలను చుట్టుముట్టడానికి, లక్షణాల పేన్లోని మూలల విలువలను మార్చండి 1.75, ఆపై నొక్కండి [నమోదు చేయండి] మార్పులను వర్తింపజేయడానికి కీ. మీకు ఇలాంటివి ఉంటాయి.
పాదాలను సృష్టించడం
టర్న్ టేబుల్ పాదాల కోసం, మేము సిలిండర్లను ఉపయోగించబోతున్నాము. ఒక సిలిండర్‌ను జోడించి, ఆపై దాని వ్యాసాన్ని మార్చండి diam = 1.75 మరియు దాని ఎత్తు h = 0.5. పై క్లిక్ చేయండి కదలిక ఆకారంలో లాగగలిగే ప్రాంతాన్ని చూపించడానికి ఎగువ టూల్‌బార్‌లోని ఎంపిక బటన్. సిలిండర్‌ను బేస్ కిందకి తరలించి, మూలల్లో ఒకదానిలో ఉంచండి. (మీరు దీన్ని ఎగువ, ప్రక్క మరియు ముందు వీక్షణల్లో తరలించాల్సి ఉంటుంది.)
సిలిండర్‌ను నకిలీ చేయండి (నొక్కండి నకిలీ ఉపకరణాల వృత్తాకార రింగ్‌లోని బటన్ లేదా నొక్కండి డి కీ) మరియు కొత్త సిలిండర్‌ను బేస్ యొక్క మరొక మూలకు తరలించడం. నాలుగు పాదాలు సరిగ్గా ఉంచే వరకు ప్రక్రియను పునరావృతం చేయండి. సిలిండర్లకు పేరు పెట్టడం మర్చిపోవద్దు (ఉదాహరణకు, అడుగుల-ఎడమ-టాప్, అడుగుల-కుడి-టాప్, అడుగుల-ఎడమ-దిగువ, అడుగుల-ఎడమ-టాప్). మీరు దీన్ని పూర్తి చేసినప్పుడు, ఫలితం ఇలా ఉండాలి.
మేము ఇప్పుడు పళ్ళెం, డిస్క్, ఆర్మ్ యాక్సిస్ మరియు బటన్‌ను సృష్టించడం గురించి పరిశీలిస్తాము. తదుపరి ఆకృతులను సృష్టించే ప్రక్రియ పాదాలకు సమానంగా ఉంటుంది. వేర్వేరు సిలిండర్ల కోసం ఉపయోగించే కొలతలు ఇక్కడ ఉన్నాయి:
పళ్ళెం: డైమ్ = 7; h = 0,5 డిస్క్: డైమ్ = 6.75; h = 0,25 బటన్: డైమ్ = 1.5; h = 0,25 ఆర్మ్-యాక్సిస్-బేస్: డైమ్ = 2.25; h = 0,25 చేయి-అక్షం: డైమ్ = 1.375; h = 1
సిలిండర్ల భుజాలను మెరుగుపరచడానికి, మీరు లక్షణాల పేన్‌లో సైడ్ ఫీల్డ్‌ను ఉపయోగించి, ప్రతి దానిలో ముఖాల సంఖ్యను పెంచవచ్చు. ఇది ఎడిటర్ యొక్క ప్రపంచ పనితీరును మరియు చివరి యానిమేషన్‌ను ప్రతికూలంగా ప్రభావితం చేస్తుంది కాబట్టి ఎక్కువ వైపులా జోడించవద్దు. ఈ సందర్భంలో, పళ్ళెం మరియు డిస్క్ కోసం 32 వైపులకు మించి ఉపయోగించవద్దని నేను మీకు సలహా ఇస్తున్నాను. మీకు ఇలాంటిదే ఉండాలి.
చేయి మరియు తల
టర్న్ టేబుల్ యొక్క చేయి మరియు తల కోసం, మేము క్యూబాయిడ్లను ఉపయోగించబోతున్నాము. చేయి కోసం, ఒక క్యూబాయిడ్ సృష్టించండి (w = 0.25; h = 0.25; d = 4), ఆపై భ్రమణాన్ని వర్తించండి -33° న y- అక్షం. తల కోసం, ఒక క్యూబాయిడ్ సృష్టించండి (w = 0.5; h = 0.5; d = 1), ఆపై భ్రమణాన్ని వర్తించండి -33° న y- అక్షం. ఆర్మ్-యాక్సిస్ సిలిండర్‌తో రెండు ఆకారాలను సమలేఖనం చేయండి. ఫలితం ఇలా ఉండాలి.
రంగులు మరియు అల్లికలు
మేము టర్న్ టేబుల్‌తో దాదాపు పూర్తి చేశాము. చివరి దశ రంగులను కేటాయించడం మరియు వినైల్ (రికార్డు యొక్క ఉపరితలాన్ని సూచించే చిత్రం) కు ఒక ఆకృతిని వర్తింపచేయడం. రంగులను కేటాయించడానికి, ఆకారాన్ని ఎంచుకుని, దానిపై క్లిక్ చేయండి రంగులు లక్షణాల పేన్‌లో ఫీల్డ్. ఆకారం యొక్క ప్రతి ముఖానికి వ్యక్తిగత రంగులను పేర్కొనడానికి ట్రిడివ్ మిమ్మల్ని అనుమతిస్తుంది, కానీ, ఈ ఉదాహరణలో, అన్ని ముఖాల రంగును మార్చడానికి మేము అన్ని ఫీల్డ్‌లను ఉపయోగించాలి. దీన్ని చేయడానికి, ఫీల్డ్‌లో హెక్స్ కలర్ కోడ్‌ను నమోదు చేసి, ఆపై నొక్కడం ద్వారా నిర్ధారించండి నమోదు చేయండి.
ఈ ఉదాహరణలో ఉపయోగించిన రంగులు ఇక్కడ ఉన్నాయి:
బేస్: # 0099FF అడుగులు, బటన్, అక్షం, చేయి మరియు తల: # F2EEE5 డిస్క్: # fa7f7a
వినైల్ యొక్క ఆకృతి కోసం, ప్రక్రియ రంగులను కేటాయించటానికి సమానంగా ఉంటుంది. డిస్క్ సిలిండర్‌ను ఎంచుకుని, ఆపై క్లిక్ చేయండి చిత్రాలు లక్షణాల పేన్‌లో ఫీల్డ్. ఎగువ ఫీల్డ్‌లోని వినైల్కు మీరు దరఖాస్తు చేయదలిచిన చిత్రం యొక్క URL ని అతికించండి మరియు నొక్కడం ద్వారా నిర్ధారించండి నమోదు చేయండి. మీరు మీ స్వంత చిత్రాన్ని ఉపయోగించవచ్చు లేదా ఈ ఉదాహరణలో ఉపయోగించినదాన్ని డౌన్‌లోడ్ చేసుకోండి.
మీరు ఇప్పుడు ఇలా కనిపించేదాన్ని కలిగి ఉండాలి.
రెండరింగ్ మరియు ఎగుమతి
ఇప్పుడు టర్న్ టేబుల్ పూర్తయింది, ఎగుమతి చేయడానికి ముందు అది అందించబడిన మార్గంలో మేము పని చేయబోతున్నాము. క్లిక్ చేయండి పరిదృశ్యం లక్షణాల పేన్ పైన ఉన్న బటన్. జూమ్ విలువను దీనికి సెట్ చేయండి 200 టర్న్ టేబుల్ పెద్దదిగా ప్రదర్శించడానికి. ఆకారాల యొక్క నల్ల సరిహద్దులను తొలగించడానికి, వెళ్ళండి సరిహద్దులు పేన్ యొక్క విభాగం మరియు అస్పష్టతను సెట్ చేయండి 0. ఫలితం ఇలా ఉండాలి.
టర్న్ టేబుల్ పై నుండి వెలిగించాలని మేము కోరుకుంటున్నాము. ఇది చేయుటకు, టర్న్ టేబుల్ పైభాగం మీకు ఎదురుగా ఉండే విధంగా సన్నివేశాన్ని తిప్పండి. బేస్ ఖచ్చితంగా దీర్ఘచతురస్రాకారంగా ఉండాలి. లక్షణాల పేన్ యొక్క tridiv.com/d/4k6 విభాగంలో కాంతి మరియు చీకటి విలువలను మార్చడం సన్నివేశంలోని నీడలను పునరుత్పత్తి చేస్తుంది. కాంతి విలువను మార్చండి 0.
టర్న్ టేబుల్ ఇప్పుడు ఎగుమతి చేయడానికి సిద్ధంగా ఉంది!
లోగోను పూర్తి చేస్తోంది
లోగోకు వచనాన్ని జోడించడానికి మరియు లోగో యానిమేషన్‌ను సృష్టించడానికి మేము సిద్ధంగా ఉన్నాము. క్లిక్ చేయండి సవరించండి యొక్క దిగువ ఎడమ వైపున ఉన్న కోడ్‌పెన్ బటన్ పై పరిదృశ్యం కోడ్‌పెన్‌కు కోడ్‌ను ఎగుమతి చేయడానికి చూడండి. ట్రిడివ్ సృష్టించిన CSS కోడ్ విక్రేత ఉపసర్గలను ఉపయోగించదని గమనించడం ముఖ్యం, కాబట్టి ప్రతి బ్రౌజర్‌లో కోడ్ ఫంక్షనల్‌గా ఉండటానికి మీరు prefixr.com లేదా leaverou.github.io/prefixfree వంటి సాధనాలను ఉపయోగించాల్సి ఉంటుంది. జావాస్క్రిప్ట్ పేన్‌ను మూసివేయడం ద్వారా ప్రారంభించండి, ఎందుకంటే మేము దానిని ఉపయోగించబోము. HTML పేన్‌లో, వర్తించే స్టైల్ ట్యాగ్‌ను తొలగించండి .సీన్ div.
CSS పేన్‌ను విస్తరించండి మరియు చివరిలో ఈ క్రింది కోడ్‌ను జోడించండి:
.సెన్ {పరివర్తన: అనువాద Y (-140px) రొటేట్ఎక్స్ (-55 దేగ్); }
ఇక్కడ, ది translateY (-140px) టర్న్ టేబుల్ 140 పిక్స్ పైకి కదులుతుంది, దాని క్రింద ఉన్న టెక్స్ట్ కోసం గదిని వదిలివేస్తుంది. అప్పుడు, ది రొటేట్ఎక్స్ (-55 దేగ్) టర్న్ టేబుల్ యొక్క నిలువు వంపును సెట్ చేస్తుంది.
వచనాన్ని జోడించడానికి, మీరు a ని జోడించాలి .శీర్షిక ప్రారంభించిన వెంటనే డివి #tridiv HTML పేన్‌లో div. లోపల, రెండు జోడించండి spans> (.మెయిన్-టైటిల్ మరియు .సబ్-టైటిల్), వేరు hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> రికార్డులు / span> / div>…
అప్పుడు మీరు సరైన ఫాంట్‌లు మరియు శైలులను వర్తింపజేయాలి. CSS పేన్‌లో, లోగోలో ఉపయోగించిన ఓపెన్ సాన్స్ ఫాంట్‌ను దిగుమతి చేసుకోండి మరియు టెక్స్ట్ ఎలిమెంట్స్ కోసం ప్రాథమిక శైలులను జోడించండి.
url దిగుమతి url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * టెక్స్ట్ బ్లాక్ కేంద్రీకరణ + ప్రాథమిక ఫాంట్ శైలులు * / శీర్షిక {స్థానం: సంపూర్ణ; టాప్: 50%; ఎడమ: 50%; మార్జిన్: 0 0 0 -165px; వెడల్పు: 330 పిక్స్; ఎత్తు: 5 ఎమ్; font-family: ’ఓపెన్ సాన్స్’, సాన్స్-సెరిఫ్; ఫాంట్-బరువు: 300; font-size: 24px; టెక్స్ట్-అలైన్: సెంటర్; అక్షర-అంతరం: 1.5 ఎమ్; రంగు: # 0099FF; } title hr {border: 1px solid # fa7f7a; మార్జిన్: .75em 0; } టైటిల్ స్పాన్ {డిస్ప్లే: బ్లాక్; } .మెయిన్-టైటిల్ {font-size: 2.15em; } .సబ్-టైటిల్ {టెక్స్ట్-ఇండెంట్: .25 ఎమ్; }
Voilà! మీ లోగో పూర్తయింది. ఇది క్రింద ఉన్న చిత్రం లాగా ఉండాలి. మీ 3D మోడల్ పూర్తయిన తర్వాత, మీరు శైలులు, యానిమేషన్లు లేదా మౌస్ ఈవెంట్‌లను జోడించడం ద్వారా CSS యొక్క శక్తిని మరింత మెరుగుపరచడానికి ఉపయోగించవచ్చు: 3D మోడల్‌ను ఇతర HTML మూలకం వలె వ్యవహరించండి.
లోగోను యానిమేట్ చేయండి
లోగోను ఉపయోగించి యానిమేషన్ చూడండి. టర్న్ టేబుల్ యొక్క భాగాలు ‘పడిపోతున్నప్పుడు’, వాటిలో ప్రతి ఒక్కటి ఒకే కీఫ్రేమ్ యానిమేషన్‌ను వేర్వేరు జాప్యాలతో పంచుకుంటాయి. ఆకారాలు అగ్ర లక్షణాన్ని సెట్ చేశాయి 50%. పడిపోయే ప్రభావాన్ని సృష్టించడానికి, మేము అగ్ర లక్షణాన్ని యానిమేట్ చేస్తాము -400 పిక్స్ కు 50%:
@keyframes పడిపోతాయి {0% {టాప్: -400px; } / * మేము ఆకారాన్ని 400px ఎత్తుకు ఉంచడం ప్రారంభిస్తాము * / 100% {టాప్: 50%; } / * అప్పుడు మేము దానిని దాని అసలు స్థానంలో ముగించాము * /}
మీరు ఈ యానిమేషన్‌ను అన్ని ఆకృతులకు ఈ క్రింది విధంగా జోడించవచ్చు:
.షాప్ {టాప్: -400 పిక్స్; యానిమేషన్: పతనం 1 సె 0 సె ఫార్వర్డ్లను సులభతరం చేస్తుంది; }
అగ్ర లక్షణాన్ని సెట్ చేయండి -400 పిక్స్ మరియు ఆలస్యాన్ని జోడించండి:
.ప్లాటర్ {యానిమేషన్-ఆలస్యం: 1.05 సె; } .డిస్క్ {యానిమేషన్-ఆలస్యం: 1.35 సె; } .బటన్ {యానిమేషన్-ఆలస్యం: 1.5 సె; } ...
ఉపయోగించి చివరి ‘బౌన్స్’ ప్రభావాన్ని సృష్టించండి రొటేట్ఎక్స్ గుణం:
90% {పరివర్తన: ట్రాన్స్లేట్ వై (-5 ఎమ్) రొటేట్ఎక్స్ (780 దేగ్) రొటేట్ వై (0 దేగ్); } 95% {పరివర్తన: ట్రాన్స్లేట్ వై (-4 ఎమ్) రొటేట్ఎక్స్ (620 దేగ్) రొటేట్ వై (0 దేగ్); } 100% {పరివర్తన: ట్రాన్స్లేట్ వై (-4.5 ఎమ్) రొటేట్ఎక్స్ (660 దేగ్) రొటేట్ వై (0 దేగ్); }
మేము ఈ ప్రత్యేకమైన సంస్కరణను ఎలా సృష్టించాము, కానీ గుర్తుంచుకోండి: పరిమితులు లేవు!
పదాలు: జూలియన్ గార్నియర్
ఈ వ్యాసం మొదట నెట్ మ్యాగజైన్ సంచిక 248 లో వచ్చింది.
