How do I set perspective on a text box?

  • 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

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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

  • > 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.

  • 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.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)