Мундариҷа
- Сар кардани кор
- Сохтани пойгоҳи гардиш
- Эҷоди пойҳо
- Даст ва сар
- Рангҳо ва матоъҳо
- Пешниҳод ва содирот
- Тамом кардани логотип
- Логотро ҷон диҳед
Якчанд роҳҳои эҷоди аниматсияи 3D дар интернет вуҷуд доранд, ки аксари онҳо дониши хуби JavaScript ва WebGL ё истифодаи васлаки ба монанди Flashро талаб мекунанд. Бо шарофати табдили CSS 3D, истифодаи 3D танҳо бо истифодаи HTML ва CSS имконпазир аст, аммо ин кор осон нест. Tridiv, барномаи ройгони онлайни ман, равандро соддатар карда, интерфейси оддӣ ва интуитивии WYSIWYG-ро пешниҳод мекунад, ки ба корбарон имкон медиҳад, ки бидуни навиштани як сатри код объектҳои 3D созанд.
Дар ин дастур, мо барои истифодаи 'Tridiv Records', нишонаи бофтаи хаёлӣ, бо истифода аз танҳо HTML ва CSS логотип эҷод ва аниматсия мекунем. Нишондиҳандаи асосии логотип бо истифода аз Tridiv дар 3D сохта мешавад. Он гоҳ мо унсурҳои типографиро бо истифодаи HTML ва CSS-и муқаррарӣ илова мекунем.
Шумо метавонед аниматсияи ниҳоӣ ва рамзеро, ки онро тавлид мекунад, дар ин ҷо мебинед.
Сар кардани кор
Мо бо эҷоди ҷадвали гардиш дар 3D бо истифода аз Tridiv оғоз мекунем. Ба tridiv.com равед ва барномаро оғоз кунед. Шумо бояд Chrome, Safari ё Opera 15 (ё дертар) -ро истифода баред.
Пеш аз оғоз, фаҳмидани интерфейси Tridiv муҳим аст. Фасли асосии муҳаррир аз чор намуд иборат аст: дар тарафи чапи боло намуди 3D, ки манзараи пурраи манзараро таъмин мекунад. Се намуди дигар онро аз боло, паҳлӯ ва пеш нишон медиҳанд. Бо истифода аз ин се намуд, шумо метавонед шаклҳои 3D созед, таҳрир кунед ва интиқол диҳед.
Лавҳаи уфуқӣ ба ду қисм тақсим карда мешавад: қисми чап маълумоти марбут ба ҳуҷҷати шуморо нишон медиҳад; қисми рост дорои асбобҳо барои сохтан ва таҳрири шаклҳо мебошад. Дар Ҳаракат кунед интихоб ва Таҳрир тугмаҳои интихоб байни шеваҳои гуногуни таҳриркунӣ мегузаранд.
Дар панели хосиятҳо (панели паҳлӯ) танзимоти ҳуҷҷатҳо ба монанди масштаб ва кӯтоҳ ба шабака ва хосиятҳои шакли интихобшуда (андоза, ҷойгоҳ, гардиш, ранг ва ғайра) намоиш дода мешаванд. Воҳиди барои андозаҳо ва мавқеъ истифодашаванда ems аст; кунҷҳои гардиш дар дараҷаҳо мебошанд.
Барои пешгирӣ кардани нофаҳмиҳо баъдтар дар дастур, мо стенографияи зеринро истифода мебарем:
w = паҳнои h = баландӣ d = диамти чуқурӣ = диаметри x deg = гардиш дар меҳвари x y deg = гардиш дар меҳвари y z deg = гардиш дар меҳвари z
Сохтани пойгоҳи гардиш
Бо гузоштани арзиши масштабсозӣ ба 200 оғоз кунед. Барои кӯмак дар кашидани шаклҳо, танзимоти фаврӣ ба сетка дар Танзимоти ҳуҷҷат қисми панели паҳлӯ. Арзиши фавриро ба 0.125.
Пойгоҳи гардиш аз кубои оддӣ иборат аст, бинобар ин тугмаро клик кунед Кубоид илова кунед тугма дар лавҳаи боло. Шумо бояд кубоидро дар ҳар чор намуди муҳаррир пайдо кунед.
Шаклро ба. Тағир диҳед пойгоҳ бо истифода аз майдони номи панели хосиятҳо (зери Хусусиятҳои шакл). Номи шакл бояд номи дурусти синфи CSS бошад, зеро он дар рамзи тавлидкардаи муҳаррир истифода мешавад. Мо ин номҳои синфро баъдтар ҳангоми аниматсия кардани тамға истифода хоҳем кард, аз ин рӯ боварӣ ҳосил кунед, ки ҳар як шакли наверо, ки дуруст эҷод мекунед, номбар кунед.
Пас аз номгузории кубоид, боварӣ ҳосил кунед, ки он дар намуди боло интихоб шудааст (он бояд бо кабуд, бо ҳалқаи даврашакл дар атрофи асбоб таъкид карда шавад), пас тугмаи " Таҳрир тугма дар болои ҳалқа барои нишон додани дастакҳои вироиш. Дастакҳои назоратиро дар паҳлӯҳои кубоид то кашидани паҳн ва амиқ кашед w = 10 ва d = 8 дар Хусусиятҳои шакл.
Шакли дохили намуди паҳлӯро клик кунед. Ин сарлавҳаҳои таҳрирро дар ин намуд нишон медиҳад ва ба мо имкон медиҳад, ки баландии онро тағир диҳем. Баландиро то расиданаш танзим кунед h = 2. Шумо инчунин метавонед арзишҳоро бевосита ба панели хосиятҳо дохил кунед. Барои давр кардани кунҷҳои кубоид, қиматҳои кунҷҳоро дар панели хосиятҳо ба тағир диҳед 1.75, пас тугмаро пахш кунед [Дохил шудан] калиди татбиқи тағиротҳо. Шумо чизе монанди ин хоҳед дошт.
Эҷоди пойҳо
Барои пойҳои гардиш, мо баллонҳоро истифода мебарем. Силиндрро илова кунед, пас диаметри онро ба диам = 1.75 ва баландии он ба h = 0.5. -Ро клик кунед Ҳаракат кунед тугмаи интихоб дар лавҳаи боло барои нишон додани майдони кашолакунӣ дар шакл. Цилиндрро дар зери пойгоҳ ҳаракат кунед, онро дар яке аз кунҷҳо ҷойгир кунед. (Ба шумо лозим аст, ки онро дар намудҳои боло, паҳлӯ ва пеш ҳаракат кунед.)
Силиндрро такрор кунед (-ро пахш кунед.) Такрорӣ тугмаро дар ҳалқаи даврашакли асбобҳо ё пахш кунед Д. калид) ва интиқоли силиндраи нав ба кунҷи дигари пойгоҳ. То он даме, ки ҳамаи пойҳо дуруст ҷойгир карда шаванд, равандро такрор кунед. Номи балонҳоро фаромӯш накунед (масалан, пойҳо аз чап-боло, пойҳо-рост-боло, пойҳо аз чап-поён, пойҳо аз чап-боло). Вақте ки шумо инро анҷом додед, натиҷа бояд чунин бошад.
Ҳоло мо ба сохтани табақ, диск, меҳвари даст ва тугма нигарем. Раванди эҷоди шаклҳои минбаъда ба пойҳо монанд аст. Инҳо андозаҳое мебошанд, ки барои силиндрҳои гуногун истифода мешаванд:
табақ: диам = 7; h = 0,5 диск: диам = 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. Ҳарду шаклро бо силиндраи меҳвари даст рост кунед. Натиҷа бояд чунин бошад.
Рангҳо ва матоъҳо
Мо тақрибан бо гардиши гардиш анҷом додем. Марҳилаи ниҳоӣ таъин кардани рангҳо ва татбиқи текстура ба винил мебошад (тасвире, ки сатҳи сабтро нишон медиҳад). Барои таъин кардани рангҳо, як шаклро интихоб кунед ва клик кунед рангҳо майдон дар панели хосиятҳо. Tridiv ба шумо имкон медиҳад, ки рангҳои инфиродӣ барои ҳар як рӯйи шаклро муайян кунед, аммо, дар ин мисол, мо бояд тамоми майдонро барои тағир додани ранги ҳамаи чеҳраҳо истифода барем. Барои ин, танҳо ба майдон рамзи ранги шонздаҳиро ворид кунед ва пас бо зеркунии он тасдиқ кунед Ворид кунед.
Инҳоянд рангҳое, ки дар ин мисол истифода шудаанд:
пойгоҳ: # 0099FF пойҳо, тугма, меҳвар, даст ва сар: # диск F2EEE5: # fa7f7a
Барои текстураи винил, раванд ба таъин кардани рангҳо монанд аст. Силиндраи дискро интихоб кунед, ва пахш кунед тасвирҳо майдон дар панели хосиятҳо. URL-и тасвиреро, ки мехоҳед ба vinyl дар майдони боло гузоред, часпонед ва бо пахшкунӣ тасдиқ кунед Ворид кунед. Шумо метавонед тасвири худро истифода баред, ё тасвири дар ин мисол истифодашударо зеркашӣ кунед.
Шумо бояд акнун чизе дошта бошед, ки ба ин монанд аст.
Пешниҳод ва содирот
Ҳоло, ки мизи гардиш ба анҷом расидааст, мо дар он роҳе кор хоҳем кард, ки он пеш аз содирот пешниҳод карда шудааст. Ангушт занед Пешнамоиш тугма дар болои панели хосиятҳо. Арзиши масштабро ба 200 барои гардиши гардиш калонтар. Барои нест кардани ҳудуди сиёҳи шаклҳо, ба Марзҳо қисми pane ва ношаффофиро ба 0. Натиҷа бояд ба ин монанд бошад.
Мо мехоҳем, ки гардиши гардиш аз боло фурӯзон карда шавад. Барои ин, саҳнаро тавре тавре чарх занед, ки болои мизҳои гардиш рӯ ба рӯ бошад. Пойгоҳ бояд комилан росткунҷа бошад. Тағири арзишҳои рӯшноӣ ва торик дар tridiv.com/d/4k6section панели хосиятҳо сояҳоро дар дохили саҳна барқарор мекунад. Арзиши рӯшноиро ба тағир диҳед 0.
Ҳоло мизи гардиш барои содирот омода аст!
Тамом кардани логотип
Мо омодаем, ки матнро ба лого илова кунем ва аниматсияи логотипро эҷод кунем. Ангушт занед Таҳрир дар тугмаи CodePen дар тарафи чапи поёни Пешнамоиш барои экспорти рамз ба CodePen. Бояд қайд кард, ки рамзи CSS, ки Tridiv тавлид кардааст, аз префиксҳои фурӯшанда истифода намекунад, аз ин рӯ ба шумо лозим меояд, ки воситаҳоеро ба монанди prefixr.com ё leaverou.github.io/prefixfree истифода баред, то код дар ҳама браузерҳо кор кунад. Бо бастани панели JavaScript оғоз кунед, зеро мо онро истифода нахоҳем кард. Дар панели HTML, теги услуби ба. Татбиқшударо хориҷ кунед .саҳна див
Панели CSS-ро васеъ кунед ва дар охир рамзи зеринро илова кунед:
.scene {табдил: translateY (-140px) rotateX (-55deg); }
Инак, translateY (-140px.)) ҷадвали гардишро 140px ба боло ҳаракат медиҳад ва ҷойро барои матн дар зери он боқӣ мегузорад. Пас, rotateX (-55deg) тамоюли амудии гардишро танзим мекунад.
Барои илова кардани матн, шумо бояд а илова кунед .номи div пас аз кушодан #tridiv div дар панели HTML. Дар дохили он, ду илова кунед дароз> (.номи-унвон ва .sub-title), ҷудо карда шудааст соат />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Пас шумо бояд шрифтҳо ва услубҳои дурустро истифода баред. Дар панели CSS, шрифти Open Sans-ро, ки дар логотип истифода шудааст, ворид кунед ва сабкҳои асосии унсурҳои матнро илова кунед.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Мутамарказонии блоки матн + сабкҳои асосии ҳарф * / title {мавқеъ: мутлақ; боло: 50%; чап: 50%; маржа: 0 0 0 -165px; паҳнӣ: 330px; баландӣ: 5em; font-family: 'Sans Open', sans-serif; вазни ҳарф: 300; андозаи ҳарф: 24px; мувофиқ кардани матн: марказ; фосилаи ҳарфҳо: 1.5em; ранг: # 0099FF; } унвон hr {сарҳад: 1px solid # fa7f7a; маржа: .75em 0; } дарозии сарлавҳа {display: block; } .асоси-унвон {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Воила! Нишони шумо пурра аст. Он бояд ба сурати зерин монанд бошад. Пас аз ба итмом расонидани модели 3D-и худ, шумо метавонед қувваи CSS-ро истифода баред, то онро бо илова кардани услубҳо, аниматсияҳо ва ё рӯйдодҳои муш беҳтар созед: танҳо ба модели 3D ҳамчун ҳама гуна унсурҳои дигари HTML муносибат кунед.
Логотро ҷон диҳед
Дар ин ҷо аниматсияро бо истифодаи тамға бубинед. Ҳангоме ки қисмҳои чархаки 'афтидан' дохил мешаванд, ҳар кадоми онҳо як аниматсияи рамзии фреймро бо таъхири гуногун мубодила мекунанд. Шаклҳо дорои хосияти боло таъин шудаанд 50%. Барои эҷоди эффектҳои афтидан, мо атрибути болоро аз -400px ба 50%:
@keyframes афтод {0% {top: -400px; } / * Мо ҷойгиркунии аниматсияро ба баландии 400px оғоз мекунем * * / 100% {top: 50%; } / * пас мо онро дар ҳолати аввалааш хотима медиҳем * /}
Шумо метавонед ин аниматсияро ба ҳамаи шаклҳо илова кунед, ба таври зерин:
.шакли {top: -400px; аниматсия: афтодани 1 сония 0-ро ба пеш осон мекунад; }
Хусусияти болоро ба -400px ва таъхир илова кунед:
.platter {аниматсия-таъхир: 1.05s; } .disc {аниматсия-таъхир: 1,35с; } .тугма {аниматсия-таъхир: 1.5s; } ...
Таъсири ниҳоии 'паридан' -ро бо истифода аз битобедX аттрибутӣ:
90% {табдил: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {табдил: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {табдил: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Ҳамин тавр мо ин версияи мушаххасро эҷод кардем, аммо дар хотир доред: маҳдудият нест!
Калимаҳо: Ҷулиан Гарниер
Ин мақола аслан дар маҷаллаи нет шумораи 248 чоп шудааст.
