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
21
S
7
G
1
Posts: 165
Reputation: 1,912

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,613

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
21
S
7
G
1
Posts: 165
Reputation: 1,912

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,613

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
64
S
25
G
10
Posts: 654
Reputation: 10,842


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 6 guests