css旋转和对齐

Question

我试图动态创建html,然后将自己作为iframe注入jquery以打开带有分页符的打印窗口.

我正在收到一个包含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°时,顶部中心是左侧,而底部中心是右侧,因为您将通过短边折叠每页.

在垂直和水平旋转之后,每个div底部/顶部应该在页面中间死亡.

如何使用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演示.在翻译功能时,500px是400px对宽度加上100px顶部的间距.translate()根据需要调整宽度和值以进行实验.

您可能必须避免对内容的宽度或高度使用%(或者至少,如果您可以避免这样做,则可能会更简单).