css rotate 및 alignment

Question

동적으로 html을 작성하려고 시도하는 중입니다. 그러면 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을 기울 같다 -center는 왼쪽에 이고 오른쪽 하단은 각 페이지를 접을 때 오른쪽 하단입니다.

각 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에서는 콘텐츠의 고정 폭 (이 경우 400 픽셀)을 설정하고 회전 된 콘텐츠의 상단 및 왼쪽 간격을 100 픽셀로 설정합니다. 이 예제에서는 컨텐츠를 중앙에 놓으려고하지는 않지만 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은 너비에 100px 위쪽 간격을 더한 400px입니다. 폭을 조정하고 필요에 따라 translate() 값을 실험 해보십시오.

콘텐츠의 너비 나 높이에 %를 사용하지 않아야합니다 (최소한 그렇게하지 않으면 훨씬 간단 할 수 있습니다).