Flip Transitions

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.

Horizontal Flip

<div class="cycle-slideshow" 
    data-cycle-fx=flipHorz
    data-cycle-timeout=2000
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>

Vertical Flip

<div class="cycle-slideshow" 
    data-cycle-fx=flipVert
    data-cycle-timeout=4000
    >
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
    <img src="https://malsup.github.io/images/p1.jpg">
</div>

CSS

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;  
}