How do I skew a shape/element (square/rectangle)?

Elements
1

Hi,

This is a newbie question and the answer will probably be embarrassing, but here I go: How do I skew a shape/element (square/rectangle) in Hype? I’ve looked everywhere but just can’t find that feature/setting.

// Leif

2

Hype doesn’t currently have an option to skew, but this possible via CSS3 transforms and is a good feature request!

3

Hey @jonathan,

I’m trying to add custom CSS to a circle object that I’ve created in an attempt to recreate this:

https://gyrosco.pe/features/

. It’s a dotted circle that rotates so you can see the rotation. How do I use the custom CSS to add it? I’m trying but the image isn’t schewing. Here is the custom CSS I am using:

#myDIV { transform:skew(20deg,20deg); }

Am I missing something?

4

Can you share your CSS again? It didn't come through (Use the preformatted text button in the editor to share code)

5

#myDIV {
background-color:lightblue;
transform:skew(20deg,20deg);
}

6

Thanks @Daniel - got another question for you while I have you.

Is there a way to create a hover state for an element, such as an image? I see you can do it for a button, but is there some way to do so for an image (or a custom button).

7

You can use the "On Mouse Over" function in the Action Inspector.

8

Thanks @gasspence! Starting to get the hang of this thing.

So, let’s say that I am creating a menu bar with 4 menu items in it. If I want each element (text) to have a hover state, do I have to create one timeline for each one? Or is there a simpler way to accomplish this? I was able to create a hover state for one menu element, but when I tried to apply it to all elements within the same timeline, the all played at the same time (even if I just hovered over one element).

And what about elements that take on different properties after being clicked? right now what I’m for the same element to have it have an affect when hovering AND after being clicked:
I create two timelines with two different effects and set one to on mouse over and one to on mouse click. Is that the best approach? It seems like a lot of work to describe two states, as well as a lot of potential timelines to manage.

9

I feel my post/thread have been hijacked. Aren’t you a bit OT now?

Leif

10

Hey Leif -

You’re right, I’m sorry! I’ll start a new thread.

11

Your question has been answered. Not sure what else you’re expecting to hear.

12

Yes, you are right. My question have been answered and I don’t expect to hear anything more. What do you expect me to do? I don’t see how I can mark it as answered or close the thread.

13

I was questioning why you were saying your thread was ‘hijacked’ when it was effectively answered already. If someone’s getting help in this thread, and the OP’s question has been answered, I guess I don’t see where your issue was…

That’s all…

14

Okay, I see. Well, one of the first rules of any forum is to stay on topic, no matter if the original question have been answered or not.

15

Seriously? Ok then, good luck with that.

16

I appreciate that you’re trying to keep discussions on topic. It does look like it had meandered a bit, but 29 days ago was moved to another thread so I think it is all good and there’s no need for further meta-discussion about it at this point much later in time.

To reiterate the bottom line on skewing: The CSS3 spec supports it, but Hype currently does not expose this as a feature. If you attempt to add it as custom styling via transforms there’s a good chance it will get overridden by Hype’s runtime, so you can generally only use it for elements Hype is not manipulating (like in Inner HTML).

We do see adding this as a good feature request for Hype!

17

Thanks for your answer, Jonathan.

No hurry with the skewing. I saw that you can skew an object in Edge Animate so I was a bit surprised that feature wasn’t included in Hype. But it’s not a deal breaker in any way. :smile:

18

This topic was automatically closed after 24 hours. New replies are no longer allowed.