Views
Actions

Class: .own-size

From Turn.js Documentation
(Difference between revisions)
Jump to: navigation, search
(Using CSS)
 
(3 intermediate revisions by one user not shown)
Line 2: Line 2:
  
 
<pre class="xml">
 
<pre class="xml">
<div id=”flipbook”>
+
<div id="flipbook">
 
<div>Page 1 with default size</div>
 
<div>Page 1 with default size</div>
<div class=”own-size” style=”width:100; height:100px;>
+
<div class="own-size" style="width:100; height:100px;">
 
Page 2 with own size
 
Page 2 with own size
 
</div>
 
</div>
 
</div>
 
</div>
 
</pre>
 
</pre>
 +
 +
==Using CSS==
 +
 +
<pre class="css">
 +
#flipbook {
 +
width:700px;
 +
height:600px
 +
}
 +
 +
#flipbook .page-wrapper{
 +
-webkit-perspective:2000px;
 +
-moz-perspective: 2000px;
 +
-ms-perspective: 2000px;
 +
perspective: 2000px;
 +
}
 +
 +
#flipbook .p2,
 +
#flipbook .p3{
 +
width:300px;
 +
height:500px;
 +
}
 +
</pre>
 +
 +
<pre class="xml">
 +
<div id="flipbook">
 +
<div class="fixed hard">Page 1 with default size</div>
 +
<div class="own-size">
 +
Page 2 with own size
 +
</div>
 +
<div class="own-size">
 +
Page 3 with own size
 +
</div>
 +
</div>
 +
</pre>
 +
 +
In this sample the 1st page will have a size of 350x600, meanwhile page 2 and 3 the customized size. Notice that the first page uses the classes [[Class: .fixed|fixed]] and [[Class: .hard|hard]].
 +
 
<yambe:breadcrumb>Turn CSS</yambe:breadcrumb>
 
<yambe:breadcrumb>Turn CSS</yambe:breadcrumb>

Latest revision as of 21:57, 18 July 2012

Customizes the size of a page. The CSS rules width and height can be added directly to the page selector or using the style parameter. For example:

<div id="flipbook">
	<div>Page 1 with default size</div>
	<div class="own-size" style="width:100; height:100px;">
		Page 2 with own size
	</div>
</div>

[edit] Using CSS

#flipbook {
	width:700px;
	height:600px
}

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

#flipbook .p2,
#flipbook .p3{
	width:300px;
	height:500px;
}
<div id="flipbook">
	<div class="fixed hard">Page 1 with default size</div>
	<div class="own-size">
		Page 2 with own size
	</div>
	<div class="own-size">
		Page 3 with own size
	</div>
</div>

In this sample the 1st page will have a size of 350x600, meanwhile page 2 and 3 the customized size. Notice that the first page uses the classes fixed and hard.

Main Page > Turn CSS > Class: .own-size