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

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

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

transform-origin作用

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

transform-originFunction

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

시계 시침 그림

가운데에 있는 세로 막대는 우리의 것입니다 초기 설정, 나머지는 이것을 기준으로 회전합니다.

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

관련 추천:

CSS 레이아웃의 개발 역사를 요약하면 4세대 CSS 레이아웃 기술입니다. 그게 최고예요掰

css의 테두리 크기 속성 사용

CSS란 무엇인가요? CSS 캐스케이딩 스타일 소개(코드) #🎜🎜##🎜🎜##🎜🎜#

위 내용은 CSS의 변형 원본 속성은 무엇을 합니까? 변환 원본 속성의 역할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!