Вращение полного ширины не достигает максимальной ширины

Question

Я пытаюсь сделать полный поворот заголовка, но проблема в том, что когда я поворачиваю его в правом углу заголовка, он имеет пробел. Я сделал jsfiddle, чтобы лучше понять мою проблему. Я стараюсь много часов и часов, но ничего не получилось. Спасибо

#header { 
background: rgba(255,0,0,0.7); 
height: 150px; 
transform: rotate(356deg) ; 
-webkit-transform: rotate(356deg) ; 
-moz-transform: rotate(356deg) ; 
-o-transform: rotate(356deg) ; 
-ms-transform: rotate(356deg) ; 
-webkit-transform-origin: bottom left;} 

http://jsfiddle.net/SAVw6/

Answer 1

Я считаю, что это то, что вы хотите:

Fiddle: http://jsfiddle.net/SAVw6/5/

HTML:

<div id="container"><div id="header"></div><div> 

CSS:

#header { 
    background: rgba(255,0,0,0.7); 
    height: 150px; 
    transform: rotate(356deg) ; 
    -webkit-transform: rotate(356deg) ; 
    -moz-transform: rotate(356deg) ; 
    -o-transform: rotate(356deg) ; 
    -ms-transform: rotate(356deg) ; 
    -webkit-transform-origin: bottom left; 
    width: 130%; 
    margin-left: -20%; 
} 
#container { 
    overflow: hidden; 
    width: 100%; 
} 

• Контейнер предотвращает любой избыток горизонтальной прокрутки
• Ширина продлевается выше 100% для того, чтобы продолжать направо и налево.
• Маржа слева выбрана отрицательная, чтобы она продолжалась влево, а не только вправо.

• Ваш -webkit-transform-origin: bottom left; Код CSS специально предназначен для Chrome и других браузеров. Для поддержки кросс-браузер, вы можете использовать:

  -webkit-transform-origin: bottom left; 
  -ms-transform-origin: bottom left; 
  transform-origin: bottom left;