உள்ளடக்கம்
- தொடங்குதல்
- டர்ன்டேபிள் அடித்தளத்தை உருவாக்குதல்
- கால்களை உருவாக்குதல்
- கை மற்றும் தலை
- நிறங்கள் மற்றும் கட்டமைப்புகள்
- ரெண்டரிங் மற்றும் ஏற்றுமதி
- லோகோவை முடித்தல்
- லோகோவை உயிரூட்டவும்
வலையில் 3D அனிமேஷனை உருவாக்க பல வழிகள் உள்ளன, அவற்றில் பெரும்பாலானவை ஜாவாஸ்கிரிப்ட் மற்றும் வெப்ஜிஎல் பற்றிய நல்ல அறிவு தேவை, அல்லது ஃப்ளாஷ் போன்ற செருகுநிரலைப் பயன்படுத்த வேண்டும். CSS 3D உருமாற்றங்களுக்கு நன்றி, HTML மற்றும் CSS ஐ மட்டுமே பயன்படுத்தி 3D ஐ உருவாக்க முடியும், ஆனால் அவ்வாறு செய்வது எளிதல்ல. எனது இலவச ஆன்லைன் பயன்பாடான ட்ரிடிவ், செயல்முறையை எளிதாக்குகிறது, இது ஒரு எளிய மற்றும் உள்ளுணர்வு WYSIWYG இடைமுகத்தை வழங்குகிறது, இது பயனர்களுக்கு ஒரு வரி குறியீட்டை எழுதாமல் 3D பொருள்களை உருவாக்க உதவுகிறது.
இந்த டுடோரியலில், HTML மற்றும் CSS ஐ மட்டுமே பயன்படுத்தி கற்பனையான பதிவு லேபிளான ‘ட்ரிடிவ் ரெக்கார்ட்ஸ்’ க்கான லோகோவை உருவாக்கி உயிரூட்டப் போகிறோம். லோகோவின் முக்கிய காட்சி திரிதீவைப் பயன்படுத்தி 3D இல் உருவாக்கப்பட உள்ளது. வழக்கமான HTML மற்றும் CSS ஐப் பயன்படுத்தி அச்சுக்கலை கூறுகளைச் சேர்ப்போம்.
இறுதி அனிமேஷன் மற்றும் அதை உருவாக்கும் குறியீட்டை இங்கே காணலாம்.
தொடங்குதல்
ட்ரிடிவைப் பயன்படுத்தி 3D இல் டர்ன்டேபிள் உருவாக்குவதன் மூலம் தொடங்க உள்ளோம். Tridiv.com க்குச் சென்று பயன்பாட்டைத் தொடங்கவும். நீங்கள் Chrome, Safari அல்லது Opera 15 (அல்லது அதற்குப் பிறகு) பயன்படுத்த வேண்டும்.
தொடங்குவதற்கு முன், ட்ரிடிவ் இடைமுகத்தைப் புரிந்துகொள்வது முக்கியம். எடிட்டரின் முக்கிய பிரிவு நான்கு காட்சிகளைக் கொண்டது: மேல் இடதுபுறத்தில் 3 டி பார்வை உள்ளது, இது காட்சியின் முழுமையான பார்வையை வழங்குகிறது. மற்ற மூன்று காட்சிகள் அதை மேல், பக்க மற்றும் முன் இருந்து காட்டுகின்றன. இந்த மூன்று காட்சிகளைப் பயன்படுத்தி, நீங்கள் 3D வடிவங்களை உருவாக்கலாம், திருத்தலாம் மற்றும் நகர்த்தலாம்.
கிடைமட்ட கருவிப்பட்டி இரண்டு பகுதிகளாக பிரிக்கப்பட்டுள்ளது: இடது பகுதி உங்கள் ஆவணம் தொடர்பான தகவல்களைக் காட்டுகிறது; வலது பகுதியில் வடிவங்களை உருவாக்குவதற்கும் திருத்துவதற்கும் கருவிகள் உள்ளன. தி நகர்வு தேர்வு மற்றும் தொகு தேர்வு பொத்தான்கள் வெவ்வேறு எடிட்டிங் முறைகளுக்கு இடையில் மாறுகின்றன.
பண்புகள் பலகம் (பக்கப்பட்டி) ஜூம் மற்றும் ஸ்னாப் டு கிரிட் போன்ற ஆவண அமைப்புகளையும், தேர்ந்தெடுக்கப்பட்ட வடிவத்தின் பண்புகளையும் காட்டுகிறது (அளவு, நிலை, சுழற்சி, நிறம் மற்றும் பல). பரிமாணங்கள் மற்றும் நிலைக்கு பயன்படுத்தப்படும் அலகு ems; சுழற்சி கோணங்கள் டிகிரிகளில் உள்ளன.
டுடோரியலில் பின்னர் எந்த குழப்பத்தையும் தவிர்க்க, நாங்கள் பின்வரும் சுருக்கெழுத்தை பயன்படுத்தப் போகிறோம்:
w = அகலம் h = உயரம் d = ஆழம் விட்டம் = விட்டம் x டிகிரி = x- அச்சில் சுழற்சி y டிக் = y- அச்சில் சுழற்சி z டிக் = z- அச்சில் சுழற்சி
டர்ன்டேபிள் அடித்தளத்தை உருவாக்குதல்
ஜூம் மதிப்பை 200 ஆக அமைப்பதன் மூலம் தொடங்கவும். வடிவங்களை வரைய உதவ, கட்டம் அமைப்பிற்கு ஸ்னாப்பை செயல்படுத்தவும் ஆவண அமைப்புகள் பக்கப்பட்டியின் பிரிவு. ஸ்னாப் மதிப்பை அமைக்கவும் 0.125.
டர்ன்டேபிள் அடிப்படை ஒரு எளிய கனசதுரத்தால் ஆனது, எனவே கிளிக் செய்யவும் க்யூபாய்டு சேர்க்கவும் மேல் கருவிப்பட்டியில் பொத்தானை அழுத்தவும். எடிட்டரில் நான்கு காட்சிகளிலும் க்யூபாய்டு தோன்றுவதை நீங்கள் காண வேண்டும்.
வடிவத்தை மறுபெயரிடுங்கள் அடித்தளம் பண்புகள் பலகத்தின் பெயர் புலத்தைப் பயன்படுத்துதல் (கீழ் வடிவ பண்புகள்). வடிவத்தின் பெயர் செல்லுபடியாகும் CSS வகுப்பு பெயராக இருக்க வேண்டும், ஏனெனில் இது எடிட்டரால் உருவாக்கப்பட்ட குறியீட்டில் பயன்படுத்தப்படும். லோகோவை அனிமேஷன் செய்யும் போது இந்த வகுப்பு பெயர்களை நாங்கள் பின்னர் பயன்படுத்துவோம், எனவே நீங்கள் உருவாக்கும் ஒவ்வொரு புதிய வடிவத்தையும் சரியாக பெயரிடுவதை உறுதிசெய்க.
க்யூபாய்டு பெயரிடப்பட்டதும், அது மேல் பார்வையில் தேர்ந்தெடுக்கப்பட்டிருப்பதை உறுதிசெய்து கொள்ளுங்கள் (இது நீல நிறத்தில் முன்னிலைப்படுத்தப்பட வேண்டும், அதைச் சுற்றியுள்ள கருவிகளின் வட்ட வளையத்துடன்), பின்னர் கிளிக் செய்க தொகு திருத்து கைப்பிடிகளைக் காட்ட வளையத்தின் மேலே உள்ள பொத்தானை அழுத்தவும். அகலமும் ஆழமும் அடையும் வரை க்யூபாய்டின் பக்கங்களில் கட்டுப்பாட்டு கைப்பிடிகளை இழுக்கவும் w = 10 மற்றும் d = 8 இல் வடிவ பண்புகள்.
பக்கக் காட்சியின் உள்ளே இருக்கும் வடிவத்தைக் கிளிக் செய்க. இந்த பார்வையில் எடிட்டிங் கையாளுதல்களை இது காண்பிக்கும், அதன் உயரத்தை மாற்ற அனுமதிக்கிறது. உயரத்தை அடையும் வரை சரிசெய்யவும் h = 2. பண்புகள் பலகத்தில் நேரடியாக மதிப்புகளை தட்டச்சு செய்யலாம். க்யூபாய்டின் மூலைகளை சுற்றி வளைக்க, பண்புகள் பலகத்தில் உள்ள மூலைகளின் மதிப்புகளை மாற்றவும் 1.75, பின்னர் அழுத்தவும் [உள்ளிடவும்] மாற்றங்களைப் பயன்படுத்துவதற்கான விசை. உங்களிடம் இது போன்ற ஏதாவது இருக்கும்.
கால்களை உருவாக்குதல்
டர்ன்டேபிள் கால்களுக்கு, நாங்கள் சிலிண்டர்களைப் பயன்படுத்தப் போகிறோம். ஒரு சிலிண்டரைச் சேர்த்து, அதன் விட்டம் என மாற்றவும் diam = 1.75 மற்றும் அதன் உயரம் h = 0.5. என்பதைக் கிளிக் செய்க நகர்வு வடிவத்தில் இழுக்கக்கூடிய பகுதியைக் காட்ட மேல் கருவிப்பட்டியில் தேர்வு பொத்தான். சிலிண்டரை அடித்தளத்தின் கீழ் நகர்த்தி, ஒரு மூலையில் வைக்கவும். (நீங்கள் அதை மேல், பக்க மற்றும் முன் காட்சிகளில் நகர்த்த வேண்டியிருக்கலாம்.)
சிலிண்டரை நகலெடுக்கவும் (அழுத்தவும் நகல் கருவிகளின் வட்ட வளையத்தில் பொத்தானை அழுத்தவும் அல்லது அழுத்தவும் டி விசை) மற்றும் புதிய சிலிண்டரை அடித்தளத்தின் மற்றொரு மூலையில் நகர்த்தவும். நான்கு அடிகளும் சரியாக நிலைபெறும் வரை செயல்முறையை மீண்டும் செய்யவும். சிலிண்டர்களுக்கு பெயரிட மறக்காதீர்கள் (எடுத்துக்காட்டாக, அடி-இடது-மேல், அடி-வலது-மேல், அடி-இடது-கீழ், அடி-இடது-மேல்). நீங்கள் அதைச் செய்தவுடன், முடிவு இப்படி இருக்க வேண்டும்.
இப்போது தட்டு, வட்டு, கை அச்சு மற்றும் பொத்தானை உருவாக்குவதைப் பார்ப்போம். அடுத்த வடிவங்களை உருவாக்குவதற்கான செயல்முறை கால்களைப் போன்றது. வெவ்வேறு சிலிண்டர்களுக்குப் பயன்படுத்தப்படும் பரிமாணங்கள் இங்கே:
தட்டு: diam = 7; h = 0,5 வட்டு: diam = 6.75; h = 0,25 பொத்தான்: diam = 1.5; h = 0,25 கை-அச்சு-அடிப்படை: diam = 2.25; h = 0,25 கை-அச்சு: diam = 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 பலகத்தை விரிவுபடுத்தி, பின்வரும் குறியீட்டை இறுதியில் சேர்க்கவும்:
.scene {உருமாற்றம்: மொழிபெயர்ப்பு Y (-140px) rotateX (-55deg); }
இங்கே, தி மொழிபெயர்ப்பு Y (-140px) டர்ன்டபிள் 140px ஐ மேல்நோக்கி நகர்த்தி, அதன் கீழே உள்ள உரைக்கு இடமளிக்கிறது. பின்னர், தி rotateX (-55deg) டர்ன்டேபிள் செங்குத்து சாய்வை அமைக்கிறது.
உரையைச் சேர்க்க, நீங்கள் ஒரு சேர்க்க வேண்டும் .தலைப்பு திறந்தவுடன் வலதுபுறம் #tridiv HTML பலகத்தில் div. உள்ளே, இரண்டு சேர்க்கவும் spans> (.மெயின்-தலைப்பு மற்றும் .சப்-தலைப்பு), பிரிக்கப்பட்டவை hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
நீங்கள் சரியான எழுத்துருக்கள் மற்றும் பாணிகளைப் பயன்படுத்த வேண்டும். CSS பலகத்தில், லோகோவில் பயன்படுத்தப்படும் திறந்த சான்ஸ் எழுத்துருவை இறக்குமதி செய்து, உரை கூறுகளுக்கான அடிப்படை பாணிகளைச் சேர்க்கவும்.
url இறக்குமதி URL (http://fonts.googleapis.com/css?family=Open+Sans:300); / * உரை தொகுதி மையப்படுத்தல் + அடிப்படை எழுத்துரு பாணிகள் * / தலைப்பு {நிலை: முழுமையானது; மேல்: 50%; இடது: 50%; விளிம்பு: 0 0 0 -165px; அகலம்: 330px; உயரம்: 5em; font-family: ’Open Sans’, sans-serif; எழுத்துரு எடை: 300; எழுத்துரு அளவு: 24px; உரை-சீரமை: மையம்; கடிதம்-இடைவெளி: 1.5em; நிறம்: # 0099FF; } தலைப்பு hr {எல்லை: 1px திட # fa7f7a; விளிம்பு: .75em 0; } தலைப்பு இடைவெளி {காட்சி: தொகுதி; } .மெயின்-தலைப்பு {எழுத்துரு-அளவு: 2.15em; } .சப்-தலைப்பு {உரை-உள்தள்ளல்: .25em; }
Voilà! உங்கள் லோகோ முடிந்தது. இது கீழே உள்ள படத்தைப் போல இருக்க வேண்டும். உங்கள் 3D மாடல் முடிந்ததும், பாணிகள், அனிமேஷன்கள் அல்லது சுட்டி நிகழ்வுகளைச் சேர்ப்பதன் மூலம் அதை இன்னும் சிறப்பாகச் செய்ய CSS இன் சக்தியைப் பயன்படுத்தலாம்: 3D மாதிரியை வேறு எந்த HTML உறுப்பு போலவும் நடத்துங்கள்.
லோகோவை உயிரூட்டவும்
லோகோவைப் பயன்படுத்தி ஒரு அனிமேஷனை இங்கே காண்க. டர்ன்டபிள் ‘வீழ்ச்சி’ இன் பகுதிகள் உள்ளே வரும்போது, அவை ஒவ்வொன்றும் ஒரே கீஃப்ரேம் அனிமேஷனை வெவ்வேறு தாமதங்களுடன் பகிர்ந்து கொள்கின்றன. வடிவங்கள் மேல் பண்புக்கூறு அமைக்கப்பட்டுள்ளன 50%. வீழ்ச்சி விளைவை உருவாக்க, முதல் பண்புக்கூறுகளை உயிரூட்டுகிறோம் -400px க்கு 50%:
@keyframes வீழ்ச்சி {0% {மேல்: -400px; P / * வடிவத்தை 400px உயரத்திற்கு நிலைநிறுத்த அனிமேஷனைத் தொடங்குகிறோம் * / 100% {மேல்: 50%; } / * பின்னர் அதை அதன் அசல் நிலையில் முடிக்கிறோம் * /}
இந்த அனிமேஷனை அனைத்து வடிவங்களுக்கும் பின்வருமாறு சேர்க்கலாம்:
. வடிவம் {மேல்: -400px; அனிமேஷன்: வீழ்ச்சி 1 கள் 0s முன்னோக்கி எளிதாக்குகின்றன; }
மேல் பண்புக்கூறு அமைக்கவும் -400px தாமதத்தைச் சேர்க்கவும்:
.platter {அனிமேஷன்-தாமதம்: 1.05 வி; } .disc {அனிமேஷன்-தாமதம்: 1.35 வி; } .பட்டன் {அனிமேஷன்-தாமதம்: 1.5 வி; } ...
ஐப் பயன்படுத்தி இறுதி ‘பவுன்ஸ்’ விளைவை உருவாக்கவும் rotateX பண்புக்கூறு:
90% {உருமாற்றம்: மொழிபெயர்ப்பு Y (-5em) rotateX (780deg) rotateY (0deg); } 95% {உருமாற்றம்: மொழிபெயர்ப்பு Y (-4em) rotateX (620deg) rotateY (0deg); } 100% {உருமாற்றம்: மொழிபெயர்ப்பு Y (-4.5em) rotateX (660deg) rotateY (0deg); }
இந்த குறிப்பிட்ட பதிப்பை நாங்கள் உருவாக்கியது இதுதான், ஆனால் நினைவில் கொள்ளுங்கள்: வரம்புகள் இல்லை!
சொற்கள்: ஜூலியன் கார்னியர்
இந்த கட்டுரை முதலில் நிகர பத்திரிகை வெளியீடு 248 இல் வெளிவந்தது.
