Class: .hard: Difference between revisions

From Turn.js Documentation
Jump to navigation Jump to search
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 6: Line 6:
<pre class="xml">
<pre class="xml">
<div id="flipbook">
<div id="flipbook">
<div class="hard">Page 1</div>
  <div class="hard">Page 1</div>
<div class="hard">Page 2</div>
  <div class="hard">Page 2</div>
</div>
</div>
</pre>
</pre>
==Adding depth==
<pre class="css">
#flipbook .page-wrapper{
  -webkit-perspective:2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  perspective: 2000px;
}
</pre>
==See Also==
* [[Class: .sheet|Class: .sheet]]
<yambe:breadcrumb>Turn CSS</yambe:breadcrumb>
<yambe:breadcrumb>Turn CSS</yambe:breadcrumb>

Latest revision as of 15:31, 6 August 2012

Sets a hard transition effect for a page. By setting all the pages as hard you will create the same effect as in Flipboard.

Example:

<div id="flipbook">
   <div class="hard">Page 1</div>
   <div class="hard">Page 2</div>
</div>

Adding depth

#flipbook .page-wrapper{
   -webkit-perspective:2000px;
   -moz-perspective: 2000px;
   -ms-perspective: 2000px;
   perspective: 2000px;
}

See Also

<yambe:breadcrumb>Turn CSS</yambe:breadcrumb>