<div id="css3Slider" class="slider" data-elem="motionslider" data-options="allowDrag:false">
   <div class="slidesHolder" data-elem="slidesHolder" >
      <div class="slide" data-elem="slide">
         <div class="holder" data-motion="{backfaceVisibility:hidden;}">
            <img alt="image" src="#" data-src="assets/css3_bg.jpg" class="css3Bg" data-motion="{backfaceVisibility:hidden; z:-150;}"/>
            <div class="ipad" data-motion="{transformPerspective:500; perspective:500; transformStyle:'preserve-3d'; backfaceVisibility:hidden}, {rotationX:60; rotationY:20; duration:1; delay:1}, {rotationY:-20; duration:1; delay:0.5}, {rotationX:0; rotationY:0; duration:1; delay:0}"> </div>
            <div class="frontHolder1" data-motion="{transformPerspective:500; perspective:500; transformStyle:'preserve-3d'; backfaceVisibility:hidden}, {rotationX:60; rotationY:20; duration:1; delay:1}, {rotationY:-20; duration:1; delay:0.5}, {rotationX:0; rotationY:0; duration:1; delay:0}">
               <img id="splitImg" alt="image" src="#" data-src="assets/front.jpg" data-elem="splitImage" data-options="rows:3; cols:3; overlap:1; useCssSize:true" data-motion="{transformPerspective:500; perspective:500; transformStyle:'preserve-3d'; backfaceVisibility:hidden}, {autoAlpha:0; delay:5.1; duration:0.1; display:none}"/>
            </div>
            <div class="frontHolder2" data-motion="{type:from; autoAlpha:0; delay:5; duration:0.1}">
               <img alt="image" src="#" data-src="assets/front.jpg" class="frontImg" data-motion="{left:-388px; duration:0.25; delay:5.325}"/>
               <div class="frontSlide2" data-motion="{left:0px; duration:0.25; delay:5.325}">
                  <div class="frontSlideBg2" data-motion="{autoAlpha:0.6}"> </div>
                  <div class="sliderText textShadowText" data-motion="{textShadow:'5px 5px 10px rgba(0, 0, 0, 0.8)'; duration:0.5; delay:6}, {textShadow:'-5px 5px 10px rgba(0, 0, 0, 0.8)'; duration:0.5;}, {textShadow:'1px 1px 15px rgba(74, 185, 211, 1)'; duration:0.5;}, {textShadow:'1px 1px 15px rgba(241, 97, 201, 1)'; duration:0.5;}, {left:-100%; duration:0.25}">TEXT<br>SHADOW </div>
                  <div class="frontSlide2" data-motion="{left:0px; duration:0.25; delay:8.5}, {left:-388px; duration:0.25; delay:5}">
                     <div class="box1" data-motion="{background:rgba(238, 238, 238, 0.6); duration:0.25; }, {boxShadow:'5px 5px 10px rgba(0, 0, 0, 0.8)'; duration:0.5; delay:8.5}, {boxShadow:'-5px 5px 10px rgba(0, 0, 0, 0.8)'; duration:0.5;}, {boxShadow:'1px 1px 15px rgba(74, 185, 211, 1)'; duration:1;}, {boxShadow:'1px 1px 0px rgba(74, 185, 211, 0)'; duration:0.5;}, {borderRadius:0px 30px; duration:0.5}"> </div>
                     <div class="box2" data-motion="{background:rgba(238, 238, 238, 0.6); duration:0.25; }, {boxShadow:'5px 5px 10px rgba(0, 0, 0, 0.8)'; duration:0.5; delay:8.5}, {boxShadow:'-5px 5px 10px rgba(0, 0, 0, 0.8)'; duration:0.5;}, {boxShadow:'1px 1px 15px rgba(241, 97, 201, 1)'; duration:1;}, {boxShadow:'1px 1px 0px rgba(241, 97, 201, 0)'; duration:0.5;}, {borderRadius:0px 30px 30px; duration:0.5; delay:0.5}"> </div>
                     <div class="box3" data-motion="{background:rgba(238, 238, 238, 0.6); duration:0.25; }, {boxShadow:'5px 5px 10px rgba(0, 0, 0, 0.8)'; duration:0.5; delay:8.5}, {boxShadow:'-5px 5px 10px rgba(0, 0, 0, 0.8)'; duration:0.5;}, {boxShadow:'1px 1px 15px rgba(2, 180, 186, 1)'; duration:1;}, {boxShadow:'1px 1px 0px rgba(2, 180, 186, 0)'; duration:0.5;}, {borderRadius:30px 0px; duration:0.5; delay:1}"> </div>
                     <div class="box4" data-motion="{background:rgba(238, 238, 238, 0.6); duration:0.25; }, {boxShadow:'5px 5px 10px rgba(0, 0, 0, 0.8)'; duration:0.5; delay:8.5}, {boxShadow:'-5px 5px 10px rgba(0, 0, 0, 0.8)'; duration:0.5;}, {boxShadow:'1px 1px 15px rgba(92, 125, 60, 1)'; duration:1;}, {boxShadow:'1px 1px 0px rgba(92, 125, 60, 0)'; duration:0.5;}, {borderRadius:30px; duration:0.5; delay:1.5}"> </div>
                  </div>
                  <div class="frontSlide3" data-motion="{autoAlpha:1; visibility:visible; delay:13.5; duration:0.25}">
                     <img alt="image" src="#" data-src="assets/front.jpg" class="clipImg" data-motion="{clip: rect(50px 150px 150px 50px); duration:0.5; delay:14.25}, {clip: rect(50px 350px 150px 250px); duration:0.5}, {clip: rect(50px 350px 150px 250px); duration:0.5}, {clip: rect(175px 350px 275px 250px); duration:0.5}, {clip: rect(100px 243px 200px 143px); duration:0.5}, {clip: rect(0px 388px 298px 0px); duration:0.5; ease:Bounce.easeOut}"/>
                  </div>
               </div>
            </div>
         </div>
         <div class="sideTextHolder">
            <div class="sideTextBg" data-motion="{background:#FFF; alpha:0.5}"> </div>
            <div class="sliderText transform3DText" data-elem="slideThumb" data-motion="{autoAlpha:0.3; duration:0.25; delay:5}">3D Transform</div>
            <div class="sliderText textShadowThumbText" data-elem="slideThumb" data-options="time:5.75" data-motion="{autoAlpha:0.3;}, {autoAlpha:1; duration:0.25; delay:5;}, {autoAlpha:0.3; duration:0.25; delay:2.75}">Text Shadow</div>
            <div class="sliderText boxShadowText" data-elem="slideThumb" data-options="time:8.75" data-motion="{autoAlpha:0.3}, {autoAlpha:1; duration:0.25; delay:8}, {autoAlpha:0.3; duration:0.25; delay:2.5}">Box Shadow</div>
            <div class="sliderText borderRadiusText" data-elem="slideThumb" data-options="time:11.25" data-motion="{autoAlpha:0.3}, {autoAlpha:1; duration:0.25; delay:10.75}, {autoAlpha:0.3; duration:0.25; delay:3}">Border Radius</div>
            <div class="sliderText clipText" data-elem="slideThumb" data-options="time:14.25" data-motion="{autoAlpha:0.3}, {autoAlpha:1; duration:0.25; delay:14}">Clip</div>
            <img alt="image" src="#" data-src="assets/css_arrow.png" class="cssArrow" data-motion="{top:150px; duration:0.25; delay:5}, {top:225px; duration:0.25; delay:2.75}, {top:300px; duration:0.25; delay:2.5}, {top:375px; duration:0.25; delay:3}" />
         </div>
         <div data-motion="{target:#splitImg; find:'div:nth-child(1)'; duration:0.5; x:-20; y:-60; z:40; delay:1.5}, {target:#splitImg; find:'div:nth-child(1)'; duration:0.5; x:0; y:0; z:0; delay:1.75}"> </div>
         <div data-motion="{target:#splitImg; find:'div:nth-child(2)'; duration:0.5; x:0; y:-60; z:30; delay:1.5}, {target:#splitImg; find:'div:nth-child(2)'; duration:0.5; x:0; y:0; z:0; delay:1.75}"> </div>
         <div data-motion="{target:#splitImg; find:'div:nth-child(3)'; duration:0.5; x:20; y:-60; z:40; delay:1.5}, {target:#splitImg; find:'div:nth-child(3)'; duration:0.5; x:0; y:0; z:0; delay:1.75}"> </div>
         <div data-motion="{target:#splitImg; find:'div:nth-child(4)'; duration:0.5; x:-20; y:-40; z:30; delay:1.5}, {target:#splitImg; find:'div:nth-child(4)'; duration:0.5; x:0; y:0; z:0; delay:1.75}"> </div>
         <div data-motion="{target:#splitImg; find:'div:nth-child(5)'; duration:0.5; x:0; y:-40; z:20; delay:1.5}, {target:#splitImg; find:'div:nth-child(5)'; duration:0.5; x:0; y:0; z:0; delay:1.75}"> </div>
         <div data-motion="{target:#splitImg; find:'div:nth-child(6)'; duration:0.5; x:20; y:-40; z:30; delay:1.5}, {target:#splitImg; find:'div:nth-child(6)'; duration:0.5; x:0; y:0; z:0; delay:1.75}"> </div>
         <div data-motion="{target:#splitImg; find:'div:nth-child(7)'; duration:0.5; x:-20; y:-20; z:40; delay:1.5}, {target:#splitImg; find:'div:nth-child(7)'; duration:0.5; x:0; y:0; z:0; delay:1.75}"> </div>
         <div data-motion="{target:#splitImg; find:'div:nth-child(8)'; duration:0.5; x:0; y:-20; z:30; delay:1.5}, {target:#splitImg; find:'div:nth-child(8)'; duration:0.5; x:0; y:0; z:0; delay:1.75}"> </div>
         <div data-motion="{target:#splitImg; find:'div:nth-child(9)'; duration:0.5; x:20; y:-20; z:40; delay:1.5}, {target:#splitImg; find:'div:nth-child(9)'; duration:0.5; x:0; y:0; z:0; delay:1.75}"> </div>
      </div>
   </div>
   <div data-elem="controls">
      <div class="controlHolder">
         <div class="seekControl" data-elem="seek">
            <div class="seekPath">
               <div class="seekPercent" data-elem="percent"> </div>
            </div>
            <div class="seekThumb" data-elem="thumb"> </div>
         </div>
         <div class="autoplayOn" data-elem="autoplay" data-options="onCss:autoplayOn; offCss:autoplayOff"> </div>
         <div class="replay controlRight" data-elem="slideThumb"> </div>
      </div>
   </div>
</div>

.sliderText
{
   cursor: pointer;
}


.holder, .css3Bg
{
   position: absolute;
   left: 0px;
   top: 0px
}


.css3Bg
{
   width: 980px;
   height: 490px;
}


.ipad
{
   position: absolute;
   left: 428px;
   top: 67px;
   width: 496px;
   height: 388px;
   background: url(../assets/ipad.png)
}


.frontHolder1
{
   position: absolute;
   left: 428px;
   top: 67px;
   width: 496px;
   height: 388px
}


#splitImg
{
   position: absolute;
   width: 388px;
   height: 298px;
   left: 54px;
   top: 45px
}


.frontHolder2
{
   width: 388px;
   height: 298px;
   position: absolute;
   left: 482px;
   top: 112px;
   overflow: hidden
}


.frontImg
{
   position: absolute;
   left: 0px;
   top: 0px;
   width: 388px;
   height: 298px
}


.frontSlide2
{
   width: 388px;
   height: 298px;
   position: absolute;
   left: 388px;
   top: 0px;
   overflow: hidden
}


.frontSlideBg2
{
   width: 388px;
   height: 298px;
   position: absolute;
   left: 0px;
   top: 0px;
   background-color: #FFF
}


.textShadowText
{
   color: #EEE;
   font-size: 56px;
   width: 100%;
   left: 0px;
   top: 91px;
   position: absolute
}


.frontSlide3
{
   width: 388px;
   height: 298px;
   position: absolute;
   left: 388px;
   top: 0px
}


.box1
{
   width: 140px;
   height: 100px;
   background-color: #EEE;
   border: 1px   solid   #B3B3B3;
   left: 34px;
   top: 35px;
   position: absolute
}


.box2
{
   width: 70px;
   height: 100px;
   background-color: #EEE;
   border: 1px   solid   #B3B3B3;
   left: 194px;
   top: 35px;
   position: absolute
}


.box3
{
   width: 70px;
   height: 100px;
   background-color: #EEE;
   border: 1px   solid   #B3B3B3;
   left: 284px;
   top: 35px;
   position: absolute
}


.box4
{
   width: 320px;
   height: 100px;
   background-color: #EEE;
   border: 1px   solid   #B3B3B3;
   left: 34px;
   top: 164px;
   position: absolute
}


.frontSlide3
{
   width: 388px;
   height: 298px;
   position: absolute;
   left: 0px;
   top: 0px;
   visibility: hidden
}


.clipImg
{
   display: block;
   position: absolute;
   width: 388px;
   height: 298px;
   left: 0px;
   top: 0px;
   clip: rect(50px   50px   50px   50px)
}


.sideTextHolder
{
   width: 368px;
   height: 490px;
   position: absolute;
   left: 0px;
   top: 0px;
}


.sideTextBg
{
   width: 368px;
   height: 490px;
   position: absolute;
   left: 0px;
   top: 0px;
}


.transform3DText
{
   width: 368px;
   height: 50px;
   position: absolute;
   left: 0px;
   top: 75px;
   color: #190F02;
}


.textShadowThumbText
{
   width: 368px;
   height: 50px;
   position: absolute;
   left: 0px;
   top: 150px;
   color: #190F02;
}


.boxShadowText
{
   width: 368px;
   height: 50px;
   position: absolute;
   left: 0px;
   top: 225px;
   color: #190F02;
}


.borderRadiusText
{
   width: 368px;
   height: 50px;
   position: absolute;
   left: 0px;
   top: 300px;
   color: #190F02;
}


.clipText
{
   width: 368px;
   height: 50px;
   position: absolute;
   left: 0px;
   top: 375px;
   color: #190F02;
}


.cssArrow
{
   position: absolute;
   left: 368px;
   top: 75px;
}