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>


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -