>

특정 시나리오에서 180도 회전하려는 직사각형 div가 있습니다.

css 변환 속성을 사용하여 div를 회전시킵니다.

크롬에서는 훌륭하게 작동하지만 가장자리에서는 div가 컨테이너 div 외부로 이동합니다. div가 원래 위치에 있지만 180도 회전하고 싶습니다.

.container {
  display: flex, flex-direction: row, align-items: center, justify-content: flex-end, writing-mode: vertical-lr width:100px, height:100px, border: solid red 1px;
}
.rotate {
    transform: rotate(180deg); 
    transform-origin: left top
}

<div class="container">
  <div class="rotate">
    Hello
  </div>
</div>

  • 답변 # 1

    @Bali Balo가 지적했듯이, .container 는 없습니다.  쉼표로 인해 CSS가 작동합니다.

    문제가 작동하는 두 가지 레이아웃 시스템이라고 생각합니다 (실제 예제 없이는 확실히 알기는 어렵지만). Flex CSS는 컨텐츠를 끝 또는 오른쪽 ( justify-content: flex-end )으로 정당화하도록 지시합니다. ). 변환 CSS가 .rotate 에 말하고 있습니다.  왼쪽 상단을 중심으로 회전합니다.

    Chrome은 당신의 align-items: center 를 기리고 있습니다  자식 요소를 회전시킬 때 컨테이너에. Edge 테스트 브라우저가 없지만 내부 DIV에있는 '변형 조직'을 존중한다고 생각합니다.

    그래서 transform-origin: center center;  직사각형이 왼쪽 상단이 아닌 중앙을 중심으로 회전해야합니다.

    모든 것이 도움이되지 않으면 Flex 코드 중 일부를 정리하려고한다고 생각합니다.

  • 답변 # 2

    .container {
      display: flex, flex-direction: row, align-items: center, justify-content: flex-end, writing-mode: vertical-lr width:100px, height:100px, border: solid red 1px;
    }
    .rotate {
      font-size: 30px;
      -webkit-transform: rotateX(180deg);
              transform: rotateX(180deg);
    }
    
    

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <div class="container">
      <div class="rotate">
        Hello
      </div>
    </div>
    </body>
    </html>
    
    

    transform: rotateX(180deg); 사용  회전하는 동안 요소가 그대로 유지되도록

  • 이전 dplyr - Sparklyr에서 R 함수를 사용하는 방법
  • 다음 javascript - 목록에서 다른 l로 LookupId의 MS Graph API 사용