css rotate and alignment

Am attempting to dynamically create html which then injects itself as an iframe into jquery to open a print window with pagebreaks.

I'm receiving a session variable which contains a list of id's. for each I want to create a block:

<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>

The JQuery plugin i'm using is: http://www.position-absolute.com/creation/print/.

What i want to do: Rotate the text 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%;
}

I suppose you could look at this as landscape page What i want then is as you tilt your head the required 90° the top-center is the left side and bottom-center is the right side as you would fold each page by the short edge.

each div bottom/top is supposed to be dead in the middle of the page after the rotation both vertically and horizontally.

How do i acquire the aforementioned page-setup with css

Should look something like this: http://goo.gl/lNP8J

Solution

For rotating the content, as a start, you'll need to set the transform-origin, the point that should be used as the center of rotation. You may also have to give the rotated element a fixed width in px or em (it didn't seem to work well when I tried it with a width in %). And be sure to use the full range of selector prefixes for transform and transform-origin to support the different browsers.

Something along the lines of the following:

-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);

Edit:

Here's a simplified version that may get you slightly closer. In the following CSS, I'm setting a fixed width for the content (in this case 400px), and forcing 100px of top and left spacing for the rotated content. In this example I'm not attempting to center the content, but the placement can be adjusted by editing the CSS (to make it look more centered). This doesn't address multi-page printing (especially how to do so with rotated content), but hopefully it's a step in the right direction:

.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);
}

Here's a jsfiddle demo. In the translate functions, the 500px is 400px for the width plus 100px top spacing. Adjust the width and the translate() values as needed to experiment with it.

You may have to avoid using % for either the width or height of the content (or at least, it may be far simpler if you can avoid doing so).