For Android device For iOS device
២៥
ឧសភា

​បង្កើត​ប្រអប់ 3D ជាមួយនឹង CSS3

នៅ​ក្នុង​លេខនេះយើងនឹងលើកយកពីការ​ប្រើ Property របស់ CSS 3 បន្តទៀត គឺលើកយកពីការ​បង្កើត​ប្រអប់​ដែល មាន​លក្ខណៈ 3D

ចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបាន​ព័ត៌មាន​ថ្មីៗ​ទាក់ទងនឹង​បច្ចេកវិទ្យា​

​ក្នុង​ការ​អនុវត្តន៍​នូវ CSS នេះត្រូវ​កំណត់​មុំ​ឲ្យ​បានច្បាស់ និង ទីតាំងរបស់ Box ​នីមួយៗ ក្នុង​នោះដែរយើងបាន​ប្រើ Property ថ្មីមួយគឺ transformation ​សម្រាប់​ធ្វើការ​បង្វិលប្រអប់ ទៅតាម​ទិសដៅ​ណាមួយ​ដែល​យើងចង់បាន ។

- Transformation ជា Property មួយ​សម្រាប់​កំណត់​លក្ខណៈ 2D និង 3D ទៅ​ឲ្យ​ធាតុ​ណាមួយ ។ Property នេះដែរ​ក៏​អាច​ធ្វើការ​បង្វិល ប្តូរទីតាំងរបស់ Block ​ណាមួយ និង បត់បែនរូបរាង Object ​ទៅតាម​មុំ​ដែល​យើងចង់បានប៉ុន្ដែ Property នេះ​ក៏​វាមិន​ដំណើរ​ការ​ជាមួយ Browser ​ទាំងអស់​នោះទេ គឺ​តម្រូវ​ឲ្យ​យើងថែម​នូវ Prefix ​ទៅលើ Property នេះទើបអាច​ដំណើរ​ការ​បាន​ច្រើន Browser

+ -ms-transformation : ​សម្រាប់​ឲ្យ Property នេះ​ដំណើរ​ការ​ជាមួយ Internet Explorer

+ -moz-transformation : ​សម្រាប់​ឲ្យ Property នេះ​ដំណើរ​ការ​ជាមួយ Mozilla Firefox

+ -o-transformation : ​សម្រាប់​ឲ្យ Property នេះ​ដំណើរ​ការ​ជាមួយ Opera

+ -webkit-transformation : ​សម្រាប់​ឲ្យ Property នេះ​ដំណើរ​ការ​ជាមួយ Safari និង Google Chrome

មុននឹងចាប់ផ្តើមយើងសូម​ណែនាំ​ពី Property  និង​ Value មួយចំនួនជាមុនសិន

- Transform: rotate (0deg) ; ​សម្រាប់​ធ្វើការ​បង្វិល​លក្ខណៈ 2D ​ដែល​តម្លៃ​គិតជាដឺក្រេ ។

- Transform: skew (0deg,0deg) : ​សម្រាប់​ធ្វើការ​ទាញ ដែល​តម្លៃ​វាគិតជាដឺក្រេដូច​គ្នា​ហើយ​តម្លៃ​ទី មួយគឺX និង តម្លៃ​ទីពីរ ឬ​គឺY តែ​ប្រសិនបើ​មាន​តម្លៃ​តែមួយ​មានន័យថា​វា​ដំណើរ​ការ​X

- Transform: scale (W,H) ; ​សម្រាប់​ធ្វើការ​បន្ថែម​ទំហំ​នៃប្លុក​ណាមួយ​ដែល​តម្លៃ​ទីមួយជាប្រវែង និង​តម្លៃ​ទីពីរគឺ​កម្ពស់ តែ​ប្រសិនបើ​ដាក់​តម្លៃ​មួយគឺវា​ដំណើរ​ការ​ទាំងពីរ មិនតែប៉ុណ្ណោះវាមានតួ នាទីមួយទៀតគឺការធ្វើ​ឲ្យ​បញ្ច្រាស់ថែមទៀតដោយ​គ្រាន់តែ​ដាក់​តម្លៃ​នោះទៅជាអវិជ្ជមានវិញ ។

ឧទាហរណ៍:

- ខាងក្រោម​ជាកូដ HTML ដែល​យើងបានដាក់ selector class

- យើងចាប់ផ្ដើម​កំណត់​ទំហំ​និងរូបរាងរបស់ប្រអប់នោះយើងនឹងទទួលបានដូច​ខាងក្រោម​:

- ក្រោយពីបង្វិលវាដោយ​ឲ្យ rotate ស្មើ 60 ដឺក្រេយើងនឹងទទួលបានដូច​ខាងក្រោម​:

- ជំហានបន្ទាប់គឺយើង​ធ្វើការ​ទាញវាដោយ​ឲ្យ skew ​ស្មើនឹង x=0deg ,y=30deg:

- ​ចុងក្រោយ​គឺការសាកល្បង​ប្រើ​ប្រាស់ scale ដោយ​ឲ្យ​វាពង្រីកខ្លួនឯងពីរដង:

កូដ HTML ជាក់ស្ដែង៖

ការ​កំណត់​ CSS ៖

ពន្យល់កូដ៖

​ខាងក្រោម​នេះជាកូដ CSS ​សម្រាប់​បង្កើត​ប្រអប់​ដែល​មាន​លក្ខណៈ 3D

​ជាដំបូង​យើងត្រូវមានប្រអប់មួយ (cube) ​សម្រាប់​ធ្វើការ​ក្តោបប្រអប់ បីទៀត ក្នុង​នោះដែរយើងបាន​កំណត់ Position ទៅ​ឲ្យ​វា Fixed ហើយចាប់ផ្តើមពី​ខាងលើ 200px និង ខាង​ឆ្វេង 10px

​បន្ទាប់មក​បង្កើត​ប្រអប់បីទៀត leftFace, rightFace និង topFace ដែល​ក្នុង​ប្រអប់ទាំងបីនោះមាន Property ​ដែល​មាន​កំណត់​គំលាត 10px, ទីតាង absolute គឺវាដើរតាមមេ, ប្រវែង 180px, ​កម្ពស់ 180px, និង​ឲ្យ​វាតម្រឹម​ផ្នែក​សងខាង ៖

នៅ​ក្នុង leftFace យើងបាន​កំណត់ ឲ្យ​បង្វែរទិសឈរ 30 ដឺក្រេ ហើយយើងត្រូវដាក់ Property ចំនួនបីគឺ -webkit-transform ​សម្រាប់​ដំណើរ​ការ​ជាមួយ Google Chrome , -moz- ​សម្រាប់​ដំណើរ​ការ​ជាមួយ Mozilla Firefox  និង transform ​សម្រាប់​ដំណើរ​ការ​ជាមួយនឹង Browser ផ្សេងៗ​ទៀត ។ ចំណែក​ឯ font-size: ជា Property ​សម្រាប់​កំណត់​ទំហំ​អក្សរ និង line-height ​សម្រាប់​កំណត់​គម្លាតពីបន្ទាត់មួយទៅបន្ទាត់មួយទៀត ព្រមទាំង​មាន Backgorund ពណ៌ #ccc 

នៅ​ក្នុង rightFace យើងបាន​កំណត់ ឲ្យ​បង្វែរទិសឈរ -30 ដឺក្រេ និង Property ផ្សេងៗ​ទៀតដូចទៅនឹង leftFace ដែរ ។

នេះគឺជា Property topFace យើងបាន​កំណត់

- ​ឲ្យ​ធ្វើការ​បង្វិល 60 ដឺក្រេ បង្វែរ -30 ដឺក្រេ ព្រមទាំង​ពង្រីកទទឹង 1.16 %

- គម្លាតពី​ខាងលើ​គឺ -158px ពីខាង​ឆ្វេង 100px

- background ពណ៌ #eee

- ​ទំហំ​អក្សរ 10px

- គម្លាតរបស់អក្សរពីបន្ទាត់មួយទៅបន្ទាត់មួយ 16px

ក្រោយពីអនុវត្តន៍​លោកអ្នក​នឹងទទួលបាន​លទ្ធផល​

♦ រៀបរៀងអត្ថបទដោយ ៖ លោក អ៊ូ ប៊ុនដេត កែ​សម្រួល​អត្ថបទឡើងវិញដោយ ៖ លោក តី សុជាតិថា

♦ ដកស្រង់ចេញពី​ទស្សនាវដ្ដី​អាន-ANT ច្បាប់​ទី លេខ៣២ សម្រាប់​ខែវិច្ឆិកា ឆ្នាំ​២០១១

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា