How do I set perspective on a text box?

Get help using Construct 2

Post » Sun Feb 12, 2017 10:32 pm

Hi!

I need some help on CSS. I want my text box to rotate 45º on the X-Axis. I already tried setting the CSS Setting "transform: rotateX(45deg)" but this only applies to the text, and not to the borders. I also tried with "clip-path: polygon(0 100%, 10% 10%, 90% 10%, 100% 100%)" but then you can't read all the characters in the text box.
Any clue? Thank you :)
B
18
S
5
Posts: 127
Reputation: 1,482

Post » Mon Feb 13, 2017 6:55 pm

Lead developer at Octeto Studios

Visit our portfolio at: http://www.octetostudios.com/ :)

Facebook || Twitter || Youtube
B
37
S
7
G
5
Posts: 217
Reputation: 5,614

Post » Mon Feb 13, 2017 10:40 pm

GamerGon wrote:Not the best place to get CSS help hahaha

Haha I know, I already did some research on the Internet, but what I found didn't affect C2's text boxes, so I decided to ask here :)
Thank you for your link, I will take a look tomorrow
B
18
S
5
Posts: 127
Reputation: 1,482

Post » Mon Feb 13, 2017 10:57 pm

ChesVCF wrote:
GamerGon wrote:Not the best place to get CSS help hahaha

Haha I know, I already did some research on the Internet, but what I found didn't affect C2's text boxes, so I decided to ask here :)
Thank you for your link, I will take a look tomorrow


In the C2 editor you can set the CSS properties for C2 text boxes (finally, they are regular html input texts) so you can get to them from a css file.
Lead developer at Octeto Studios

Visit our portfolio at: http://www.octetostudios.com/ :)

Facebook || Twitter || Youtube
B
37
S
7
G
5
Posts: 217
Reputation: 5,614

Post » Mon Feb 13, 2017 11:00 pm

You don't need rotateX in your declaration, transform: rotate(42deg) will work just fine.

Note you will also want to include browser specific variants:

-ms-transform: rotate(42deg); /* IE 9 */
-webkit-transform: rotate(42deg); /* Chrome, Safari, Opera */
transform: rotate(42deg);

You can do this via set style, or inline via the index.html like so:

<style> input { transform: rotate(42deg);}</style>

Alternatively you can use an external stylesheet - with these two methods you'll have to pay attention to specificity if you want to target singular inputs.
B
57
S
19
G
9
Posts: 639
Reputation: 9,533


Return to How do I....?

Who is online

Users browsing this forum: wizdigitech and 17 guests