CSS旋轉和調整

Question

在嘗試動態創建HTML，然後注入自己作爲一個iframe到jQuery的打開與pagebreaks打印窗口。

我收到一個包含id列表的會話變量。 每個我想創建一個塊：

<div class="card"> 
    <div class="top-center"> 
     <div class="first-line"> 
      some text 
     </div> 
     <div class="second-line"> 
      some text 
     </div> 
     <div class="second-line"> 
      some text 
     </div> 
    </div> 
    <div class="bottom-center"> 
     <div class="first-line"> 
      some text 
     </div> 
     <div class="second-line"> 
      some text 
     </div> 
     <div class="second-line"> 
      some text 
     </div> 
    </div> 
</div> 

的jQuery插件，我使用的是：http://www.position-absolute.com/creation/print/。

我想要做什麼： 旋轉文本90°

* 
{ 
    margin: 0px; 
    padding: 0px 
} 
.card { 
    -webkit-transform: rotate(90deg); 
    page-break-after:always; 
    /* this is taken from w3schools*/ 
    margin-left:auto; 
    margin-right:auto; 
    width: 70%; 
} 

我想你可以看看這個景觀頁面 什麼，我想，然後爲你傾斜你的頭所需的90°頂部 - 中心是左側 ，底部中心是右側，因爲您可以通過短邊摺疊每頁。

每個格底/頂部應該旋轉 後，在頁面的中間死了垂直和水平。

如何取得上述頁面設置與CSS

應該是這個樣子： http://goo.gl/lNP8J

Answer 1

對於旋轉的內容，作爲一個開始，你需要設置transform-origin中，應該用作旋轉中心的點。您可能還必須爲px或em指定旋轉元素的固定寬度（當我使用寬度以％爲單位嘗試時，它似乎不能很好地工作）。並且確保使用transform和transform-origin的全部選擇器前綴來支持不同的瀏覽器。

東西沿着以下行：

-webkit-transform-origin: 0 0; 
-moz-transform-origin: 0 0; 
-ms-transform-origin:  0 0; 
transform-origin:   0 0; 

-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-ms-transform:  rotate(90deg); 
transform:   rotate(90deg); 

編輯：

下面是一個簡化版本，可以讓你稍微靠近。在下面的CSS中，我爲內容設置了一個固定的寬度（在這種情況下爲400px），並強制旋轉內容的頂部和左側間距爲100px。在這個例子中，我並不試圖將內容居中，但可以通過編輯CSS來調整位置（使其看起來更居中）。這並沒有解決多頁打印（尤其是如何與旋轉內容這樣做），但希望它是朝着正確方向邁出的一步：

.card { 
    width: 400px; 
    background-color: #eee; /* Temporary bg color, for testing */ 

    -webkit-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -ms-transform-origin:  0 0; 
    transform-origin:   0 0; 

    -webkit-transform: translate(100px, 500px) rotate(-90deg); 
    -moz-transform: translate(100px, 500px) rotate(-90deg); 
    -ms-transform:  translate(100px, 500px) rotate(-90deg); 
    transform:   translate(100px, 500px) rotate(-90deg); 
} 

這裏有一個jsfiddle demo。在翻譯功能中，500px爲400px，寬度加上100px頂部間距。根據需要調整寬度和translate()值以對其進行實驗。

您可能必須避免使用％，持續寬度或內容的高度（或至少，它可能是簡單得多，如果你能避免這樣做）。