CSS3旋转和网站宽度

我必须在我的网站上旋转部分内容。问题是要旋转的部分是网站宽度的100％，旋转后它们宽度超过100％，所以我有一个丑陋的水平滚动条。CSS3旋转和网站宽度

我试图添加一个溢出：隐藏到正文，但网站不能垂直滚动，所以它不是一个解决方案。

HTML：

<div class="first"><h2>Txt txt </h2></div> 

<div class="wrapper"> 
    <div class="bgtext "> 
     <h3>Texte TexteTexteTexteTexte Texte Texte Texte Texte Texte Texte </h3> 
    </div> 
    <div class="bottomrotated"></div> 
</div>

CSS：

*{ 
    margin: 0; 
    padding: 0; 
    } 
.first{ 
     transform: rotate(-8deg); 
     position: absolute; 
     width: 100%; 
     height: 30px; 
     top: 20%; 
     background: #000; 
     padding: 0 30px; 
     left: -15px; 
    } 

    h2, h3{ 
    color: #FFF; 
    text-align: center; 
    font: arial; 
    } 

    .wrapper{ 
    position:relative; 
    } 
    .bgtext{ 
     background: lightgrey; 
     padding: 0 0 0px 0; 
     position: relative; 
     z-index: 2; 
    } 

    .bottomrotated{ 
     height: 60px; 
     width: 100%; 
     transform: rotate(2deg); 
     background: lightgrey; 
     position: absolute; 
     bottom: -30px; 
     z-index: 1; 
    }

来源

2014-09-19 arlg