# Flip View Like iOS

**URL:** <https://forums.fusetools.com/t/flip-view-like-ios/4879>\
**Category:** How-to Discussions\
**Created:** [February 29, 2016, 2:16pm UTC](https://forums.fusetools.com/t/flip-view-like-ios/4879 "2016-02-29T14:16:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erick\_Tamayo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/erick_tamayo/32/527_2.png) [@Erick\_Tamayo](https://forums.fusetools.com/u/Erick_Tamayo)\
**Post date:** [February 29, 2016, 2:16pm UTC](https://forums.fusetools.com/t/flip-view-like-ios/4879/1 "2016-02-29T14:16:53Z")

</div>

Hello.

I’m getting my hands dirty with Fuse and I’m loving it!

I have a panel that is like a card and I’m trying to figure out how I can do a “flip” animation to show what’s in the “back” of the card

[https://www.dropbox.com/s/tvrwp8au8tinfvq/Screenshot%202016-02-29%2010.13.37.png?dl=0](https://www.dropbox.com/s/tvrwp8au8tinfvq/Screenshot%202016-02-29%2010.13.37.png?dl=0)

I’ve seen that this can be achieved on iOS but I’m not sure how to start in Fuse with this:

[https://www.youtube.com/watch?v=547FUpPVGRE](https://www.youtube.com/watch?v=547FUpPVGRE)

Any ideas?

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [February 29, 2016, 2:26pm UTC](https://forums.fusetools.com/t/flip-view-like-ios/4879/2 "2016-02-29T14:26:42Z")

</div>

I need to achieve the same!

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [February 29, 2016, 2:39pm UTC](https://forums.fusetools.com/t/flip-view-like-ios/4879/3 "2016-02-29T14:39:15Z")

</div>

The standard transforms in Fuse support 3D transformation, but you need to have a 3D viewport enabled first. At the root of your app (sorry, it’s not supported elsewhere yet) add:

`<Viewport Perspective="100"> ... your app ... </Viewport>`

Where `Perspective` is the distance to the camera. There is also a `CullFace="Back"` option that will cause things to not draw when facing backwards, but you should instead make them invisible insted. Culled objects are still there and will receive pointer events, potentially blocking other input.

Then you rotate things in 3D in an action, such as `<Rotate DegreesY="45"/>`.

There are also the `TransformOrigin="HorizontalBoxCenter"` and `VerticalBoxCenter` to assist in such transforms. These set the rotation point of an object such that it was the face of a box of that size. In the particular card animation you are showing however this is probably not needed.

---

<div class="post-metadata">

**Author:** ![Erick\_Tamayo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/erick_tamayo/32/527_2.png) [@Erick\_Tamayo](https://forums.fusetools.com/u/Erick_Tamayo)\
**Post date:** [February 29, 2016, 5:32pm UTC](https://forums.fusetools.com/t/flip-view-like-ios/4879/4 "2016-02-29T17:32:10Z")

</div>

Thanks a lot edA-qa mort-ora-y, going to start working on that!

---

<div class="post-metadata">

**Author:** ![Erick\_Tamayo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/erick_tamayo/32/527_2.png) [@Erick\_Tamayo](https://forums.fusetools.com/u/Erick_Tamayo)\
**Post date:** [February 29, 2016, 10:37pm UTC](https://forums.fusetools.com/t/flip-view-like-ios/4879/5 "2016-02-29T22:37:49Z")

</div>

Yeah! It worked:

[http://d.pr/v/18kmv](http://d.pr/v/18kmv)

As you said still have to hide it and display the other, will tackle that right away :).

I had to set the perspective to `Perspective="1000"` so the card looks inside the panel when rotating, on the preview it seems that it flickers a bit BUT in the phone looks just fine.

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![Jay\_B](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@Jay\_B](https://forums.fusetools.com/u/Jay_B)\
**Post date:** [April 13, 2016, 7:07pm UTC](https://forums.fusetools.com/t/flip-view-like-ios/4879/6 "2016-04-13T19:07:20Z")

</div>

Hey Erick! Can you repost your solution? I’m curious as well as to how you did this.

Thanks! Jay

---

<div class="post-metadata">

**Author:** ![Jay\_B](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@Jay\_B](https://forums.fusetools.com/u/Jay_B)\
**Post date:** [April 13, 2016, 9:24pm UTC](https://forums.fusetools.com/t/flip-view-like-ios/4879/7 "2016-04-13T21:24:45Z")

</div>

Just started playing with Fuse so not sure if this is even right or optimal but can someone tell me if there’s a better way?

Thanks, Jay

````auto

```ux
    <DockPanel>

        <Panel ux:Name="FrontPanel" Width="95%" Height="80%">
            <Page >
            <Rectangle Layer="Background" Color="#eee" CornerRadius="5"/>
            <DropShadow/>
            <StackPanel Alignment="Center" Margin="15">
                <Text Value="Front" TextWrapping="Wrap" Alignment="Center" LineSpacing="15" FontSize="17" />

            </StackPanel>
            </Page>
            <Clicked>
                <Set state.Active="frontToBack"/>

            </Clicked>

        </Panel>

        <Panel ux:Name="BackPanel" Width="95%" Height="80%">
            <Page >
            <Rotation DegreesY="180"/>
            <Rectangle Layer="Background" Color="#ddd" CornerRadius="5"/>
            <DropShadow />
            <StackPanel Alignment="Center" Margin="15">
                <Text Value="Back" />
            </StackPanel>
            </Page>

            <Clicked>
                <Set state.Active="backToFront"/>

            </Clicked>
        </Panel>
    </DockPanel>

    <StateGroup ux:Name="state" Transition="Parallel" Rest="frontState">
        <State Name="frontState">
            <DebugAction />
        </State>
        <State Name="frontToBack" >
            <Set BackPanel.Opacity="1"/>
            <Rotate DegreesY="180" Duration="0.2" DurationBack="0" Target="FrontPanel"/>
            <Rotate DegreesY="180" Duration="0.2" DurationBack="0" Target="BackPanel"/>
            <BringToFront Target="BackPanel"/>
            <DebugAction Message="FrontToBack"/>
        </State>
        <State Name="backToFront" >
            <Rotate DegreesY="180" Target="BackPanel" />
            <Rotate DegreesY="180" Target="FrontPanel"/>
            <Rotate DegreesY="-180" Duration="0.2" DurationBack="0" Target="FrontPanel"/>

            <Rotate DegreesY="-180" Duration="0.2" DurationBack="0" Target="BackPanel"/>
        <BringToFront Target="FrontPanel"/>

            <DebugAction Message="backToFront"/>
        </State>

    </StateGroup> 
</Viewport>

````

```auto

```