Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[HELP] API CSS to rotate a

1523161309

Edited 1523161388
Finderski
Pro
Sheet Author
Compendium Curator
The title should say:  [HELP] API CSS to rotate a <div> I'm working on another card-type thing (I know we have new API Card functions, but...they won't work for what I'm wanting to do); part of my html that the API will output is a rotated div so the card number and suit are upside down.  The API log shows: "cardEnd: <div style=\"background-color: white; border: 1px solid black; border-top: none; border-radius: 0px 0px 15px 15px; width: 100%; margin: 0px;\"><div style=\"display: block; width: 95%; color: red; padding-top: 10px;padding-left: 10px; text-align: left; transform: rotate(180deg); \">" But the chat seems to strip it out.  Using the Dev Tools, I can manually put it back in and the card looks right, so I know the code itself works (I've also used it on jsfiddle to figure it out).   So...is there something special I need to do to get that bit of formatting to stay?
1523193961
The Aaron
Forum Champion
API Scripter
Most of the CSS3 functions like rotate() get stripped out by the sanitizer. There might be a way to do the rotation with CSS, you’ll have to experiment. Using negative width and height might work? if I get some time later I’ll try and find something. 
1523200204
The Aaron
Forum Champion
API Scripter
hmm.. I'm not having much luck finding anything.  =(    Try transform: scale(-1,-1); You might just have to upload copies of the images upside down and use the unicode upside down characters for output: zʎxʍʌnʇsɹbdouɯןʞſıɥbɟǝpɔqɐ 
1523281000
Finderski
Pro
Sheet Author
Compendium Curator
That's what I was afraid of... :( Thanks for trying. :)