mandarīnpīle Posted June 14, 2013 Report Share Posted June 14, 2013 (edited) Ir izveidoti 3 mazi kubi, kas savienoti līnijā kā garena 3D figūra. Nepieciešams tos rotēt pa X un Y asīm. CSS porpertijs "transform: rotateY() rotateX()" savā darbībā rotē ap 3D figūras vienu stūri, bet nepieciešams to rotēt ap figūras centru. Google saka, ka atrisinājums slēpjas transform-origin CSS propertijā, bet man neizdodas ar to atstāt jelkādu iespaidu uz 3D objektu. Šeit links uz paraugu http://jsfiddle.net/ZVVK3/ (Pievienots tikai -webkit- prefikss, tāpēc paraugs skatāms TIKAI ar Chrome vai Safari pārlūkiem) Tā kubu rinda iekš CSS apzīmēta ar ID #first_line_of_cubes pašā faila apakšā. Tātad - kā rotēt ap centru? Edited June 14, 2013 by mandarīnpīle Quote Link to comment Share on other sites More sharing options...
mandarīnpīle Posted June 14, 2013 Author Report Share Posted June 14, 2013 (edited) Āh. Skarbā dzīves patiesība - latviešu kūtrums nekad ātruma ziņā nepārspēs stackoverflow forumu. Tur problēmai stundas laikā tika atrasts daļējs risinājums. Varbūt varat paturpināt.. Papildus notestēju problēmu ar sekojošām metodēm: 1.) Izveidoju otro kubu līniju iekš #second_line_of_cubes 2.) Izslēdzu -webkit-perspective:1000px, lai rotācija tikai uz Y ass arī būtu redzama tikai uz Y ass (nevis arī X). 3.) Pozicionēju #second_line_of_cubes tieši zem #first_line_of_cubes 4.) Rotēju #first_line_of_cubes par 0 grādiem un #second_line_of_cubes par 180 grādiem, lai abas līnijas ir pretēji vērstas. Tagad skaidri redzams, ka rotācijas ass nav centrā jo abas līnijas nesaskan. Tomēr tās ir perfekti nepieciešamajā pozīcijā kad transform-origin tiek iestatīts uz "340px 0px 0px" Šeit ir paraugs: http://jsfiddle.net/VpFjt/ (darbojas tikai iekš Chrome) Loģiski origin vērtībai 300px būtu jāapzīmē 600px platās line_of_cubes centru, tomēr pareizā ir 340px vērtība. Atlikušais jautājums:no kurienes un kā rodas tie papildus 40px? Edited June 15, 2013 by mandarīnpīle Quote Link to comment Share on other sites More sharing options...
Mr.Key Posted June 14, 2013 Report Share Posted June 14, 2013 offt: Skarbā dzīves patiesība ir tāda, ka ļāvies piekrāpt sevi, noticot tam, kurš solīja, ka latvieši izkonkurēs StackOverflow... Quote Link to comment Share on other sites More sharing options...
mandarīnpīle Posted June 15, 2013 Author Report Share Posted June 15, 2013 offt: Skarbā dzīves patiesība ir tāda, ka ļāvies piekrāpt sevi, noticot tam, kurš solīja, ka latvieši izkonkurēs StackOverflow... Laikam jau nekas cits neatliek kā vien nākt pretī - iztulkoju stackoverflow domu gājienu iepriekšējā postā. Ja nu kādam līdz. Quote Link to comment Share on other sites More sharing options...
daGrevis Posted June 17, 2013 Report Share Posted June 17, 2013 > latviešu kūtrums nekad ātruma ziņā nepārspēs stackoverflow forumu. s/kūtrums/stulbums/ I have no idea... Quote Link to comment Share on other sites More sharing options...
Kavacky Posted June 17, 2013 Report Share Posted June 17, 2013 Nahuj tāda pederastija jātaisa ar CSS? Vajag "3D", zīmē canvās ar WebGL. Quote Link to comment Share on other sites More sharing options...
mandarīnpīle Posted June 17, 2013 Author Report Share Posted June 17, 2013 Nahuj tāda pederastija jātaisa ar CSS? Vajag "3D", zīmē canvās ar WebGL. WebGL pašlaik nav manā toolboxā un par to neko daudz nezinu. 3D ko gribu panākt, ir pieticīgs. Izšķiršanās par labu CSS vai WebGL šādā gadījumā, manuprāt, jāizdara dēļ browser supporta. Ja var ticēt šai lapai http://caniuse.com/webgl tad īsta uzticamība, ka 3D strādās, laikam ir tikai Chromā. Jo lieto CSS eksperimentālās iespējas, tad strādā Chrome, Safari un Firefox. Un tas izskatās pēc overkill'a dēļ kaudzītē sakrautu kubu kustināšanas. Ar CSS nepieciešamais koda daudzums ir DAUDZ mazāks. Ja jau CSS veidotāji to palēnām ievieš, tad kaut kāds mērķis tam noteikti ir. Quote Link to comment Share on other sites More sharing options...
codez Posted June 18, 2013 Report Share Posted June 18, 2013 Ja jau māžojās ar 3D, tad citas īstas alternatīvas par webgl nav. Ar CSS neko prātīgu nepanāksi. Un koda daudzums nav nemaz tik liels, ja, piemēram, izmanto three.js bibliotēku: http://www.html5canvastutorials.com/three/html5-canvas-three-js-basic-material/ http://www.html5canvastutorials.com/three/html5-canvas-three-js-phong-material/ http://www.html5canvastutorials.com/three/html5-canvas-webgl-texture-with-three-js/ Quote Link to comment Share on other sites More sharing options...
mandarīnpīle Posted June 18, 2013 Author Report Share Posted June 18, 2013 Ja jau māžojās ar 3D, tad citas īstas alternatīvas par webgl nav. Ar CSS neko prātīgu nepanāksi. Un koda daudzums nav nemaz tik liels, ja, piemēram, izmanto three.js bibliotēku: http://www.html5canvastutorials.com/three/html5-canvas-three-js-basic-material/ http://www.html5canvastutorials.com/three/html5-canvas-three-js-phong-material/ http://www.html5canvastutorials.com/three/html5-canvas-webgl-texture-with-three-js/ Kā ir ar browser supportu? Quote Link to comment Share on other sites More sharing options...
Kavacky Posted June 18, 2013 Report Share Posted June 18, 2013 Normāli. Quote Link to comment Share on other sites More sharing options...
mandarīnpīle Posted June 19, 2013 Author Report Share Posted June 19, 2013 Konkrētāk? Quote Link to comment Share on other sites More sharing options...
codez Posted June 19, 2013 Report Share Posted June 19, 2013 Support labs. Ja nemaldos, three.js māk renderēt arī izmantojot 2D canvas un tās būs uz jebkura moderna browsera. Quote Link to comment Share on other sites More sharing options...
jurchiks Posted June 19, 2013 Report Share Posted June 19, 2013 Vai drīkst uzzināt, priekš kam tev tas vispār vajadzīgs? Quote Link to comment Share on other sites More sharing options...
mandarīnpīle Posted June 19, 2013 Author Report Share Posted June 19, 2013 Support labs. Ja nemaldos, three.js māk renderēt arī izmantojot 2D canvas un tās būs uz jebkura moderna browsera. Es nevaru googlē atrast nevienu īsti labu piemēru. Taisot iekš CSS, lielākā sāpe ir Opera un IE. Prakstiski uz IE es arī vairs neceru, bet nu Opera būtu labi. Piemēram, atverot ko šādu: http://maps3d.svc.nokia.com/webgl/ Ar webkit viss iet. Tomēr, atverot ar Opera, uzlec paziņojums, ka lietotājam ir jāiet Operas settingos un jāieslēdz WebGL. Nu, ir lielāka iespēja, ka standarta interneta lietotājs tādu lapu vienkārši aizvērs, nevis rakāsies uzstādījumos. Ja nu tomēr rakāsies - es to izdarīju, bet man, piemēram, tāpat neiet. Quote Link to comment Share on other sites More sharing options...
jurchiks Posted June 19, 2013 Report Share Posted June 19, 2013 Stulbi, ka Opera neiedomājās webgl uztaisīt tāpat, kā, piemēram, flash plaginam - "this webpage wants to use webgl. allow? yes/no" Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.