How to smooth rotate at 180 on Y a rectangle

How-to Discussions
#1

Hi guys , i’m looking a way to rotate a rectangle at 180 on Y axe smoothly
this is what i’m doing and its not that perfect

            <Rectangle Height="150" Width="85%" CornerRadius="8" Color="Red">
            <Clicked>
                <Rotate DegreesY="180" Duration="0.7" Easing="QuadraticIn"/>
            </Clicked>
        </Rectangle>

thanks a lot

#2

Hi,

What do you mean by Y-axis?

You want a 3D rotation? Check this out: https://www.fusetools.com/examples/e-commerce-ui

If you want to rotate in the 2D plane, use the Z axis.

#3

I’m building a little game , when a user click on a face its change to the other face smoothly , i already see a code sample like this here , but i can’t find it . i already tested 3D rotation following this example by adding viewport , but didnt get it working like i want

#4

Also: what do you mean by “smooth” and what constitutes “not perfect” and “not what I want”? It’s hard to understand what you want to achieve and what’s not working with your current solution since you’re not describing what it is you want. when a user click on a face its change to the other face smoothly doesn’t mean anything. :slight_smile:

As a wild stab in the dark: I see you have an easing curve on – try experimenting with different easing curves or simply use Linear – it’s what I would expect you to use if you want smooth motion.

#5

via GIPHY

maybe i’m a bit picky , but when it turn , the rectangle disappear a moment , when i want something who doesnt disappear a moment

#6

I’m sorry, but I don’t understand what you mean or what you want to happen.