Flip the Card Vertically

Building on the Quick Start example, you can change how the card flips using the animation option. By default, the card flips horizontally, but you can change it to flip vertically using the direction attribute of the animation.

See Flipping Actions for information about other ways that you can change the animation.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the direction attribute of the animation option to vertical.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijflipcard"], function () { $(document).ready(function () { $("#flipcard1").wijflipcard({ animation: { direction: "vertical" } }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijflipcard"], function () {
    $(document).ready(function () {
        $("#flipcard1").wijflipcard({ 
            animation: { 
                direction: "vertical"
            } 
        });
    });
});
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Click the card to flip it vertically, and click it again to flip it back.

Concepts

Widgets

Reference