$title = 'Flip Transitions'; include '../inc/inc_intro_demo.php'; ?>
Cycle2's flip transitions are only supported on browsers that support CSS3 3D transforms. This includes IE10 as well as current versions of Chrome, Firefox, Opera and Safari.
Cycle2's flip transition plugin must be included in order to use the flip effect. See the Download page for a link to the flip plugin.
<div class="cycle-slideshow"
data-cycle-fx=flipHorz
data-cycle-timeout=2000
>
<img src="/images/p1.jpg">
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/images/p4.jpg">
</div>
<div class="cycle-slideshow"
data-cycle-fx=flipVert
data-cycle-timeout=4000
>
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/images/p4.jpg">
<img src="/images/p1.jpg">
</div>
You may wish to also include (and possibly modify) CSS like the following to further control the flip effect:
.cycle-slideshow { -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; -moz-perspective: 1000; -moz-transform-style: preserve-3d; -o-perspective: 1000; -o-transform-style: preserve-3d; perspective: 1000; transform-style: preserve-3d; }include '../inc/inc_outro.php'; ?>