html - Turning a letter in a sentence without the text separating into different lines -

i have sentence turn letter, cannot seem without text separating different lines. managed turn use of h1 , h2 gave me problem of separating different lines more thinking :

h1 {    font-family: "gill sans", arial, sans-serif;    font-size: 150%;    text-transform: uppercase;    letter-spacing: 0.2em;  }  .rotate {    -moz-transform: scale(-1, 1);    -webkit-transform: scale(-1, 1);    -o-transform: scale(-1, 1);    -ms-transform: scale(-1, 1);    transform: scale(-1, 1);  }

<div id="toptext">    <h1> t<span class="rotate">e</span>xt test </h1>  </div>

but not working.

assuming mean flip (around letter's vertical axis) rather 'rotate/turn'.

as stated, transforms not work on inline elements change display `inline-block. added minor translation account letter spacing / layout differences.

h1 {    font-family: "gill sans", arial, sans-serif;    text-transform: uppercase;    letter-spacing: 0.2em;    text-align: center;    font-size: 72px;  }  .rotate {    display: inline-block;    transform: translatex(-.2em) scale(-1, 1);  }

<div id="toptext">    <h1> t<span class="rotate">e</span>xt test </h1>  </div>