[html5 + css3] Windows-8-like 3D Animations

Giả lập hiệu ứng metro app của Windows 8 trên nền Web y hệt

• Cấu trúc code

PHP:

<div class="dashboard clearfix">
  <div class="col1 clearfix">
    <div class="big todos-thumb" data-page="todos">
      <p>My Todos
        <span class="todos-thumb-span">You have 5 more tasks to do!</span>
      </p>
    </div>
    <div class="small lock-thumb">
      <span class="icon-font  center" aria-hidden="true" data-icon=""></span>
    </div>
    <div class="small last cpanel-thumb" data-page="cpanel">
      <span class="icon-font" aria-hidden="true" data-icon=""></span>
    </div>
    <div class="big notes-thumb" data-page="notes">
      <span class="icon-font" aria-hidden="true" data-icon=""></span>
      <p> Notes</p>
    </div>
    <div class="big calculator-thumb" data-page="random-page"></div>
  </div>
 
  <div class="col2">
    <!--....-->
  </div>
 
  <div class="col3"> 
    <!--....-->
  </div>
</div>


• Cấu trúc trang overlay (là cái trang khi bạn click vào icon nó hiện ra đó)

PHP:

<div class="page todos">
  <h2 class="page-title">My Todos</h2>
  <!--content of page goes here-->
  <div class="close-button">x</div>
</div>
 
<div class="page random-page">
  <h2 class="page-title">Some Awesome App!</h2>
  <!--content of page goes here-->
  <div class="close-button">x</div>
</div>


• View demo: Link
• Download:
  Code:

  http://www.mediafire.com/?am73td8e1n7qwa3

  (Pass: vietdesigner.net)

Nguồn: Sara Soueidan