html - text rotation css in IE vs chrome and FF text is not visible

Question

Hello all I am trying to setup a sidebar navigation with html CSS and jquery that allows the user to click on a button the buttons will disappear and the menu will slide out from the left side of the page.

You can view a working sample of this here

I'm trying to figure out why the text does not appear within the div element visully in Chrome but it appears in IE. The desired effect is to have the text rotated -90 deg within the div tag. It appears to be there just not visible?

I'd appreciate any suggestions.

Thanks in advance

Answer 1

您必须使用该代码设置旋转元素的基本位置：

-ms-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-o-transform-origin:50% 50%;

我建议你把它写在一个新的类中，以应用于每个旋转的 div。