Highlighting Acorns excellent CSS3 Image Filter Generator.

[Egg Bramhill]

Recently Acorn answered a thread in a very quiet backwater of the Forums.

LINK

I believe it needs more of a spotlight so I've created this post.

I attach a xar file using his filter.

Here's what it's capable of:

DEMO

Gone into my Goodies folder.

Now I'm going to be cheeky and ask Acorn if the filter could in anyway contain a rotation element?

[Acorn]

Now I'm going to be cheeky and ask Acorn if the filter could in anyway contain a rotation element?

Egg, thank you for the plug.

I don't understand your ask on "a rotation element"?

Acorn

[Egg Bramhill]

Hi Acorn. I create animated svg's like the one in my example. They only animate in the original orientation they where created in. Is there a way to rotate them using your generator or somehow else?

[Acorn]

Hi Acorn. I create animated svg's like the one in my example. They only animate in the original orientation they where created in. Is there a way to rotate them using your generator or somehow else?

Egg, that would probably be a CSS transform: rotate(degrees); on the SVG tag or its ID.

Acorn

[Egg Bramhill]

Thanks Acorn. To late tonight, I'll look into it later

[Acorn]

Just checked.

Select the SVG Placeholder and in Xara add a Name/ID/Anchor e.g., freda.
Add <style> #freda {transform: rotate(10deg); } </style>

Acorn

[Acorn]

...and considerably more fun with:

<style>
#freda {
  transition: 1s;
}
#freda:hover {
  transform: rotate(180deg);
}
</style>

or

<style>
#freda:hover {
  animation: spin 0.5s infinite;
}


@keyframes spin {
  0% {
  transform: rotate(0deg);
  }
  100% {
  transform: rotate(360deg);
  }
}
</style>

Acorn

[Egg Bramhill]

Cheers Acorn, that's great!

DEMO

[Acorn]

Cheers Acorn, that's great!
DEMO

Thought it would appeal.
I like how you kept freda on and didn't furlough her.

Acorn