css rotar y alinear

Estoy intentando crear dinámicamente html que luego se inyecta como un iframe en jquery para abrir una ventana de impresión con saltos de página.

Recibo una variable de sesión que contiene una lista de identificaciones. para cada uno quiero crear un bloque:

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

El complemento JQuery que estoy usando es: http://www.position-absolute.com/creation/print/.

Lo que quiero hacer: Rotar el texto 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%;
}

Supongo que podría ver esto como una página apaisada. Lo que quiero entonces es inclinar la cabeza los 90 ° requeridos, el centro superior es el lado izquierdo y el centro inferior es el lado derecho, ya que doblaría cada página por el borde corto. .

se supone que cada div inferior/superior está muerto en el medio de la página después de la rotación tanto vertical como horizontal.

¿Cómo adquiero la configuración de página antes mencionada con css?

Debería verse algo como esto: http://goo.gl/lNP8J

preguntado el 02 de julio de 12 a las 12:07

Es posible que deba dividirse en 2 preguntas: una para rotar el contenido y otra para crear una ventana modal. -

1 Respuestas

Para rotar el contenido, para empezar, deberá configurar el transform-origin, el punto que debe utilizarse como centro de rotación. Es posible que también deba darle al elemento rotado un ancho fijo en px o em (no pareció funcionar bien cuando lo probé con un ancho en %). Y asegúrese de usar la gama completa de prefijos de selector para transform y transform-origin para soportar los diferentes navegadores.

Algo parecido a lo siguiente:

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

Aquí hay una versión simplificada que puede acercarlo un poco más. En el siguiente CSS, estoy configurando un ancho fijo para el contenido (en este caso, 400 px) y forzando 100 px de espacio superior e izquierdo para el contenido girado. En este ejemplo, no intento centrar el contenido, pero la ubicación se puede ajustar editando el CSS (para que se vea más centrado). Esto no aborda la impresión de varias páginas (especialmente cómo hacerlo con contenido girado), pero con suerte es un paso en la dirección correcta:

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

Aquí hay una demostración de jsfiddle. En las funciones de traducción, el 500px is 400px para el ancho más 100px espaciamiento superior. Ajuste el ancho y el translate() valores según sea necesario para experimentar con él.

Es posible que deba evitar usar % para el ancho o el alto del contenido (o al menos, puede ser mucho más simple si puede evitarlo).

Respondido 03 Jul 12, 14:07

La rotación per sé no es un problema, es la alineación central después. Al hacer la rotación en gráficos de computadora, lo que normalmente haría es transformar el elemento en x, y: 0,0, lo que supongo que debe hacer el origen y luego rotar allí y luego transformar el elemento de regreso a donde se supone que debe estar. No puedo dar cuenta de la resolución de la pantalla, etc., así que pensé que podría hacer algo como position:absolute y luego a la derecha 50% más o menos, pero esto no funciona, realmente podría usar información adicional si usted o alguien está dispuesto a proporcionarlo - fogedi

Aproximadamente, o exactamente, ¿cuál es el tamaño del contenido o la página que está girando? ¿Cuál es el ancho fijo, y por casualidad hay una altura fija o aproximada (en caso de que resulte útil saberlo)? ¿Está el contenido centrado horizontalmente antes de la rotación y debería permanecer así después de la rotación? ¿Y qué tan cerca está el contenido de la parte superior de la ventana del navegador? (¿hay un desplazamiento vertical de algún tipo, o está en la parte superior de la "página")? - Matt Coughlin

El tamaño de la página es A4, doblado por el lado largo, de modo que 21.0 cm x (29.7/2) = 14.85 cm. Cada parte inferior/superior de div debe estar centrada en su área separada del 50 % de la página. Se supone que el contenido debe estar centrado tanto vertical como horizontalmente después de la rotación. Quizás el paisaje es una mejor opción. - fogedi

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.