회전 CSS3 2D 변환

회전 CSS3 2D 변환

CSS3 2D 변환

• 변환 (TRANSFROM)는 변위 요소, 회전, 스케일링 및 다른 효과를 달성 할 수는 CSS3의 파괴를 특징의 하나이다
• 변환 (TRANSFROM)을 단순히 변형으로서 이해 될 수있다
  • 모바일 : TRANSFROM
  • 회전 : 회전
  • 규모 : 규모

로터리 회전의 CSS3 2D 변환

• 차원 로테이션 요소가 2 차원 평면에서 시계 방향 또는 시계 반대 방향으로 회전 할 수 있다는 것이다

• 문법

• transform:rotate(度数)

• 힘
  • 루트도 내부 회전 기기 (예 : ° 인 rotate(45deg))
  • 각도가 포지티브 방향으로 회전되면, 각 음의 반 시계 방향 회전 인
  • 기본 회전 중심 지점은 요소의 중심점이다

• 하자가 사진 회전을

img {
        width: 150px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin: -75px;
        transition: all 1.5s;
}

img:hover {
        transform: rotate(360deg);
 }

• 우리는 전환을 사용하고 360의 사진을 시계 방향으로 회전을 완료 회전 °

2D 변환 중심점

• transform-origin변환 소자의 중심점을 설정하는데 사용될 수있다
• 문법
  • transform-origin: x y;
• 힘
  • 주 x 및 y 파라미터의 뒷면은 공간으로 분리한다는
  • XY 기본 변환 소자 중심점 중심점이다 (50 % 내지 50 %)
  • 당신은 또한 픽셀 XY 또는 명사 (왼쪽 센터 botton을 위) 제공 될 수있다
    • transform-origin: 50% 50%;등가로transform-origin: center center;
    • transform-origin: 40px 40px;화소 PX가 될 수
    • transform-origin: left bottom;
• 우리가 당신을 보여 드리죠transform-origin: 40px 40px;

img {
           width: 150px;
           position: fixed;
           top: 50%;
           left: 50%;
           margin: -75px;
           transition: all 1.5s;
           transform-origin: 40px 40px;
       }

       img:hover {
           transform: rotate(360deg);
       }