html - How do I use the parent div to contain & move rotated spans? -

how use parent div (#warped) move , contain, rotated span elements (which in fact 'curved words' want keep in said position) in 1 movement?

i have used link generate curvature: http://csswarp.eleqtriq.com/

the <span> tags placed within #warped parent element in html document, despite on webpage appear located outside of #warped div

i to, example, move entire curved word left of page. how this?

here css:

#warped {  position: relative;  display: block; }  #warped>span[class^=w]:nth-of-type(n+0) {  display: block;  position: absolute;  transform-origin: 50% 100%; }  #warped span {  font-family: 'abeezee';  font-size: 38px;  font-weight: regular;  font-style: normal;  line-height: 0.65;  white-space: pre;  overflow: visible;  padding: 0px; }  #warped .w0 {  transform: rotate(0.91rad);  width: 20px;  height: 24px;  left: 552.15px;  top: 152.55px; }  #warped .w1 {  transform: rotate(1.06rad);  width: 23px;  height: 24px;  left: 565.17px;  top: 174.68px; }      etc etc  

here html well:

<div id='warped'>  <span class='w0'>f</span><span class='w1'>a</span><span class='w2'>n</span><span class='w3'>t</span><span class='w4'>a</span><span class='w5'>s</span><span class='w6'>t</span><span class='w7'>i</span><span class='w8'>c</span><span class='w9'>!</span><span class='w10'>!</span><span class='w11'>!</span><span class='w12'>!</span> </div> 

the issue position:absolute , display:block on span elements. change to:

#warped>span[class^=w]:nth-of-type(n+0) {  display: inline-block;  transform-origin: 50% 100%; } 

as long don´t have specified width on #warped 100% of browser , text it's outside.