Windows-8-like Animations with CSS3 and jQuery

index.html

<div class="demo-wrapper">
<!-- classnames for the pages should include: 1) type of page 2) page name-->
  <div class="s-page random-restored-page">
    <div class="page-content">
    <h2 class="page-title">Some minimized App</h2>
    </div>
    <div class="close-button s-close-button">x</div>   
  </div>
  <div class="s-page custom-page">
    <div class="page-content">
    <h2 class="page-title">Thank You!</h2>
    </div>
    <div class="close-button s-close-button">x</div>
  </div>
  <div class="r-page random-r-page">
    <div class="page-content">
    <h2 class="page-title">App Screen</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae a nesciunt hic animi iure laborum vitae maiores blanditiis non voluptate similique vel earum cumque nostrum voluptas illo minus alias fugiat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aliquid distinctio eum neque provident doloremque nostrum totam assumenda repellat repudiandae perferendis facilis voluptatem praesentium dignissimos impedit cumque tempore id quaerat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sint officia deleniti omnis asperiores nihil voluptatem maxime labore inventore consequatur ipsa nobis officiis laudantium cum provident quo tempore temporibus corporis.</p>
    </div>
    <div class="close-button r-close-button">x</div>
  </div>
<!--each tile should specify what page type it opens (to determine which animation) and the corresponding page name it should open-->
  <div class="dashboard clearfix">
    <ul class="tiles">
      <div class="col1 clearfix">
        <li class="tile tile-big tile-1 slideTextUp" data-page-type="r-page" data-page-name="random-r-page">
          <div><p>This tile's content slides up</p></div>
          <div><p>View all tasks</p></div>
        </li>
        <li class="tile tile-small tile tile-2 slideTextRight" data-page-type="s-page" data-page-name ="random-restored-page">
          <div><p class="icon-arrow-right"></p></div>
          <div><p>Tile's content slides right. Page opens from left</p></div>
        </li>
        <li class="tile tile-small last tile-3" data-page-type="r-page" data-page-name="random-r-page">
          <p class="icon-calendar-alt-fill"></p>
        </li>
        <li class="tile tile-big tile-4 fig-tile" data-page-type="r-page" data-page-name="random-r-page">
          <figure>
            <img src="https://sarasoueidan.com/demos/windows8-animations/images/blue.jpg" />
            <figcaption class="tile-caption caption-left">Slide-out Caption from left</figcaption>
          </figure>
        </li>
      </div>

      <div class="col2 clearfix">
        <li class="tile tile-big tile-5" data-page-type="r-page" data-page-name="random-r-page">
          <div><p><span class="icon-cloudy"></span>Weather</p></div>
        </li>
        <li class="tile tile-big tile-6 slideTextLeft" data-page-type="r-page" data-page-name="random-r-page">
          <div><p><span class="icon-skype"></span>Skype</p></div>
          <div><p>Make a Call</p></div>
        </li>
        <!--Tiles with a 3D effect should have the following structure:
            1) a container inside the tile with class of .faces
            2) 2 figure elements, one with class .front and the other with class .back-->
        <li class="tile tile-small tile-7 rotate3d rotate3dX" data-page-type="r-page" data-page-name="random-r-page">
          <div class="faces">
            <div class="front"><span class="icon-picassa"></span></div>
            <div class="back"><p>Launch Picassa</p></div>
          </div>
        </li>
        <li class="tile tile-small last tile-8 rotate3d rotate3dY" data-page-type="r-page" data-page-name="random-r-page">
          <div class="faces">
            <div class="front"><span class="icon-instagram"></span></div>
            <div class="back"><p>Launch Instagram</p></div>
          </div>
        </li>
      </div>

      <div class="col3 clearfix">      
        <li class="tile tile-2xbig tile-9 fig-tile" data-page-type="custom-page" data-page-name="random-r-page">
          <figure>
            <img src="https://sarasoueidan.com/demos/windows8-animations/images/summer.jpg" />
            <figcaption class="tile-caption caption-bottom">Fixed Caption: Some Subtitle or Tile Description Goes Here with some kinda link or anything
            </figure>
        </li>
        <li class="tile tile-big tile-10" data-page-type="s-page" data-page-name="custom-page">
          <div><p>Windows-8-like Animations with CSS3 &amp; jQuery &copy; Sara Soueidan. Licensed under MIT.</p></div>
        </li>
      </div>
    </ul>
  </div><!--end dashboard-->

</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://sarasoueidan.com/demos/windows8-animations/js/scripts.js"></script>

style.css

/* 
DEMO FOR MY BLOG POST TUTORIAL 
How to Create Windows-8-like Animations with CSS3 and jQuery
https://sarasoueidan.com/blog/windows8-animations

*/

styles

<link href="https://sarasoueidan.com/demos/windows8-animations/css/demo-styles.css" rel="stylesheet" />

windows-8-like-animations-with-css3-and-jquery.markdown

Windows-8-like Animations with CSS3 and jQuery

UPDATED DEMO FOR MY BLOG POST TUTORIAL How to Create Windows-8-like Animations with CSS3 and jQuery http://blog.sarasoueidan.com/windows8-animations

BEST VIEWED IN WEBKIT BROWSERS and FULL VIEW MODE.

A Pen by Sara Soueidan on CodePen.

License.