CSS의 변형 원본 속성은 무엇을 합니까? 변환 원본 속성의 역할-CSS 튜토리얼-php.cn

CSS의 변형 원본 속성은 무엇을 합니까? 변환 원본 속성의 역할

不言

풀어 주다： 2018-08-01 14:36:49

원래의

4309명이 탐색했습니다.

이 기사에서는 CSS에서 변환 원본 속성이 수행하는 작업을 소개합니다. Transform-Origin 속성의 역할에는 일정한 참고값이 있으니 도움이 필요한 친구들에게 참고하시면 좋을 것 같습니다

최근에 만든 불꽃놀이 애니메이션입니다. 애니메이션 구현 과정에서 주로 불꽃놀이 회전 중에 막혔는데 나중에 transform-origin 속성에 대한 깊은 이해가 없다는 것을 발견했습니다. 예를 들어 연습하고 속성에 대한 이해를 깊게했습니다. transform-origin属性理解不深，特地找了个例子来练习，加深了对属性的理解。

`transform-origin`作用

这个属性是用来改变元素变形的原点，一般用来配合旋转来使用最多。接收参数可为一个、两个、三个。当为两个值，分别代表距离盒模型左侧的值，如transform-origin: 50px 50px;

transform-originFunction

CSS의 변형 원본 속성은 무엇을 합니까? 변환 원본 속성의 역할 이 속성은 요소 변형의 원점을 변경하는 데 사용되며 일반적으로 회전과 함께 사용됩니다. 수신된 매개변수의 수는 1개, 2개 또는 3개일 수 있습니다. 두 개의 값이 있는 경우 transform-origin: 50px 50px;와 같이 상자 모델의 왼쪽까지의 거리를 나타냅니다. 이는 컨테이너의 회전 중심이 왼쪽 위 모서리가 됨을 의미합니다. 박스 모델의 X축과 Y축 거리를 원점으로 50px을 회전 원점으로 합니다.

시계 시침 그림

가운데에 있는 세로 막대는 우리의 것입니다 초기 설정, 나머지는 이것을 기준으로 회전합니다. CSS의 변형 원본 속성은 무엇을 합니까? 변환 원본 속성의 역할

  <p>
    </p><p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

로그인 후 복사

아래 CSS 코드에서 볼 수 있듯이, 회전을 설정했습니다. 중심은 회전의 원점으로 첫 번째 수직선(3,105)px입니다. 여기서 거리는 거리 상자 모델의 왼쪽 값입니다. 이를 이해하면 다른 시침을 쓴 다음 회전할 수 있습니다. 시침을 얻으려면 별도로 사용하세요. 여기서 값이 어떤 위치를 기준으로 계산되었는지 이해하지 못해서 많은 함정에 빠졌습니다.

CSS

.hour {
  position: absolute;
  left: 105px;
  width: 6px;
  height: 50px;
  background-color: #000;
  border-radius:6px;
  -webkit-transform-origin:3px 105px; 
          transform-origin:3px 105px;
}
.hour:nth-child(2) {
  transform:rotate(45deg);
}
.hour:nth-child(3) {
  transform:rotate(90deg);
}
.hour:nth-child(4) {
  transform:rotate(-45deg);
}
.hour:nth-child(5) {
  transform:rotate(-90deg);
}

로그인 후 복사