1

I'm trying to achieve the following effect:

enter image description here

Google only brings up tutorials on how to rotate text along Z axis using rotate().

Does anyone know how to do this?

Thank you!

user1563544
  • 379
  • 3
  • 17
  • 1
    Take a look at [this](http://www.w3schools.com/css/css3_3dtransforms.asp). Is not exactly as your picture but it does what you ask. – atomCode Mar 25 '15 at 04:30
  • Does it have to be Javascript/Html5/Canvas? What about CSS3? – Hanlet Escaño Mar 25 '15 at 04:33
  • Html canvas does not do 3d rotation, but you can get the effect you desire by using the vertical slicing technique on this nice Stackoverflow post: http://stackoverflow.com/questions/19544735/how-to-make-rooftext-effect-and-valley-text-effect-in-html5-or-fabric-js – markE Mar 25 '15 at 04:34
  • @markE this is not a duplicate of the question you referred to. I'm looking for the best solution to rotating text along Y axis, not achieving rooftext effect. Those are different things. – user1563544 Mar 25 '15 at 04:39
  • even if my goal can be achieved using your method, doesn't mean my question is a duplicate. you just basically killed my question. – user1563544 Mar 25 '15 at 04:51
  • I reopened the question. You probably want to add css as tag as well. It can be done with WebGL and canvas, it can be done using slices with 2D canvas, but the more efficient way is probably to do this using CSS 3D rotation/transform, though you loose the ability to save it as image. –  Mar 25 '15 at 04:54
  • Thank you. I'm still a beginner and I am making a game, so I need to do it through canvas. Is there a way to apply CSS 3D rotation using javascript? – user1563544 Mar 25 '15 at 04:57
  • 1
    @user1563544. Apologies to you. I see you've added the `css-transforms` tag to your question so more solutions are available to you than with your original tags: `javascript, html5, and canvas`. Given the original restriction of your `canvas` tag there was just one solution available to you (the duplicate question I linked). Again, sorry for the misunderstanding and good luck with your project! – markE Mar 25 '15 at 16:51
  • 1
    My question was related to `canvas` only. No CSS involved. @markE, you are right in terms of what my question was about, but I still think that the question you referred me to (which according to you is the only way to achieve this via `canvas`, and I believe you) is not a duplicate of mine, by definition. I'm not asking the same thing, I'm asking something similar. Regardless, I want to thank both of you for your help. I really appreciate it :) – user1563544 Mar 26 '15 at 04:14

0 Answers0