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()值以对其进行实验。

您可能必须避免使用％，持续宽度或内容的高度（或至少，它可能是简单得多，如果你能避免这样做）。