បង្កើត Flip page (វគ្គ ១)

នៅ​ក្នុង​កំណាត់​កូដ​ខាង​ក្រោម យើង​នឹង​បង្ហាញ​មិត្ត​អ្នក​អាន​អាច​បង្កើត​ការ​បង្វិល Page ឬ Div ជា​មួយ ភាសា HTML & CSS។ នៅ​ក្នុង​ឧទាហរណ៍​ខាង​ក្រោម​គឺ​ជា​ការ​បង្វិល Div ដែល​មាន​តួរ​នា​ទី​ជា Front បង្វិល​ទៅ Div ដែល​មាន​នា​ទី​ជា Back នៅ​ពេល​ដែល​យើង​ជ្រលរ ពី​លើ Div Front ។

កូដ CSS :

 CSS | 

 copy code |
?
 



01
/* entire container, keeps perspective */

02
.flip-container {

03
  perspective: 1000;

04
}

05
  /* flip the pane when hovered */

06
  .flip-container:hover .flipper, .flip-container.hover .flipper {

07
    transform: rotateY(180deg);

08
  }

09
 

10
.flip-container, .front, .back {

11
  width: 320px;

12
  height: 480px;

13
}

14
 

15
/* flip speed goes here */

16
.flipper {

17
  transition: 0.6s;

18
  transform-style: preserve-3d;

19
 

20
  position: relative;

21
}

22
 

23
/* hide back of pane during swap */

24
.front, .back {

25
  backface-visibility: hidden;

26
 

27
  position: absolute;

28
  top: 0;

29
  left: 0;

30
}

31
 

32
/* front pane, placed above back */

33
.front {

34
  z-index: 2;

35
}

36
 

37
/* back, initially hidden pane */

38
.back {

39
  transform: rotateY(180deg);

40
}

កូដ HTML

 HTML | 

 copy code |
?
 



01
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">

02
  <div class="flipper">

03
    <div class="front" style="background-color:blue;">

04
      <!-- front content --> 

05
    </div>

06
    <div class="back" style="background-color:red;">

07
      <!-- back content -->

08
    </div>

09
  </div>

10
</div>

DOWNLOAD SOURCE CODE