Views
Actions

Class: .hard

From Turn.js Documentation
(Difference between revisions)
Jump to: navigation, search
(Adding a feeling of depth to hard pages)
(Adding depth)
 
(One intermediate revision by one 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>
Line 15: Line 15:
 
<pre class="css">
 
<pre class="css">
 
#flipbook .page-wrapper{
 
#flipbook .page-wrapper{
-webkit-perspective:2000px;
+
  -webkit-perspective:2000px;
-moz-perspective: 2000px;
+
  -moz-perspective: 2000px;
-ms-perspective: 2000px;
+
  -ms-perspective: 2000px;
perspective: 2000px;
+
  perspective: 2000px;
 
}
 
}
 
</pre>
 
</pre>

Latest revision as of 08: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>

[edit] Adding depth

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

[edit] See Also

Main Page > Turn CSS > Class: .hard