របៀប​ប្រើ​ប្រាស់ 3D Flip Effect រូបភាព នៅ​ក្នុង​ Blogger

   លោក​អ្នក​អាច​បន្ថែម​រូប​ភាព​នៅ​ក្នុង​ប្លុក​បាន​យ៉ាង​ងាយ​ស្រួល​តាម​វិធី​សាមញ្ញៗ​ជា​ច្រើន។ ប៉ុន្ដែ​អ្វី​ដែល​សំខាន់​នោះ តើ​រូបភាព​ដែល​បាន​បន្ថែម​នោះ មាន​ភាព​ទាក់​ទាញ​ឬ​អត់? មាន​ចលនា​គួរ​ឲ្យ​ចង់​មើល​ឬ​អត់? ដូច្នេះ​ហើយ ថ្ងៃ​នេះ ខ្ញុំ​នឹង​នាំ​លោក​អ្នក​ឲ្យ​មក​ប្រើ​ស្តាយ 3D Flip Effect (CSS3) ដែល​ជួយ​ឲ្យ​រូប​ភាព​មាន​ចលនា​យ៉ាង​រស់​រវ៉ើក​ នៅ​ពេល​ដែល​ដាក់​កូន​កណ្ដុរ​ (mouse cursors) ពី​លើ​វា។

   3D Flip Effect មាន​ចលនា ជា​ការ​បង្វិល​រូប​ភាព​ឲ្យ​ត្រឡប់​ក្រោយ ហើយ​នឹង​មាន​អក្សរ (text) នៅ​ខាង​ក្រោយ​ខ្នង។ ចលនា​វា​ប្រហាក់​ប្រហែល​នឹង​ការ​បើ​សន្លឹក​សៀវភៅ​អញ្ចឹង​ដែរ។ លោក​អ្នក​អាច​រចនា​រូប​ភាព​ឲ្យ​ស្អាត ហើយ​បន្ថែម​នូវ 3D Flip Effect នេះ ដើម្បី​លើក​កម្ពស់​រូប​ភាព​បន្ថែម​ទៀត។

៙ របៀប​ដាក់ 3D Flip Effect នៅ​ក្នុង​ប្លុក​ ៖
* លោក​អ្នក​អាច​យក​ទៅ​ដាក់​នៅ​ត្រង់ Post ឬ​កន្លែង​ផ្សេង​ទៀត​ក៏​បាន។ តែ​ពេល​ ខ្ញុំ​ណែ​នាំ​ចំពោះ​ការ​ដាក់ 3D Flip Effect រូបភាព នៅ​ផ្នែក​ចំហៀង​នៃ​ប្លុក។
- កត់ត្រា​ចូល​ (Log In) ​ក្នុង​គណនី​ Blogger របស់​លោក​អ្នក​​ជា​មុន​សិន។
- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)

- រមូរ​​ចុះ (scroll down) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​ចុច​​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)

- ចម្លង​កូដ​ខាង​ក្រោម​​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript ។ 
- បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget ​លោក​អ្នក​​ដាក់ ឬ​មិន​បាច់​ដាក់​ក៏​បាន។

កូដដែល​អ្នក​ត្រូវ​ចម្លង​ដាក់ HTML/JavaScript

<style>
.profile-image {
  margin-bottom:20px;
}
div.flip-3d {
 perspective: 1200px; width: 100%; float: left;
}
div.flip-3d-skills {
 perspective: 1200px; width: 100%; float: left;
}
div.flip-3d figure {
 position: relative;
 transform-style: preserve-3d;
 transition: 1s transform;
 font-size: 1.6rem;
}
div.flip-3d figure img {
 width: 100%;
}
div.flip-3d figure figcaption {
 position: absolute;
width: 105%; height: 50%; top: 0;
 transform: rotateY(.5turn) translateZ(1px);
 background: rgba(255,255,255,0.9);
 text-align: center;
 padding-top: 45%;
 opacity: 0.6;
 transition: 1s .5s opacity;
}
div.flip-3d:hover figure { transform: rotateY(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }
div.flip-3d figure:after {
content: " "; display: block;
height: 8vw; width: 100%;
transform: rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}
</style>
<div class="profile-image">
 <div class="flip-3d">
 <figure>
 <img src="yourimage.jpg" />
 <figcaption>Hello! Tingmoung</figcaption>
 </figure>
 </div>
</div>

*** ពេល​​ដាក់​រូច​ហើយ សូម​ចុច​លើ​ប៊ូតុង Save ។
*** ចំណាំ ៖
- yourimage.jpg : គឺ​ជា​ដំណ​រូបភាព​របស់​លោក​អ្នក។
# ឧទាហរណ៍​ដំណ​រូប​ភាព​ខ្ញុំ៖ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr74zis9EBERInNA7PvE8LkWFSbkDSz-wJAcqw5VS6w3Uzh4T_72KXZeotUIcjhKVGXem8xdS3UclaMEjsfWqb0EgQj-vb2UjmjTnOPBpOwhz7OgI1q57kpoADKhs9sk-J_ldkn-RHi5A/s1600/me.gif
-  Hello! Tingmoung : ពាក្យ​នៅ​ខាង​ក្រោយ​ខ្នង នៅ​ពេល​ដែល​វា​ត្រឡប់​មក។

អត្ថបទស្រដៀងគ្នា:

Tweet