CSS 변환 생성기

CSS 변환 생성기는 CSS 변환 속성에 대한 시각적 편집기입니다. 각 변환 기능에 대해 슬라이더를 이동합니다. 즉,번역, 회전,축척, 스큐 및 3D 함수 rotateX,rotateY 및 원근 - 그리고 효과가 미리보기 요소에 적용되는 것을 실시간으로 본 다음 생성되는 정확한 CSS 를 복사합니다. 또한 회전 및 축척마다 피벗되는 앵커 포인트인 transform-origin 을 설정할 수 있습니다.

변환 속성은 주변의 레이아웃을 방해하지 않고 요소를 재배치하고 모양을 변경합니다. 변환,회전 또는 스케일링된 요소는 여전히 흐름에서 원래 상자를 차지하므로 이웃 요소가 움직이지 않습니다. 이는 변환을 호버 효과,입구 애니메이션 및 리플로우를 트리거해서는 안 되는 모든 모션에 대한 올바른 도구로 만드는 것입니다. 여러 함수를 하나의 선언에 나열할 수 있으며 요소의 좌표 공간에서 오른쪽에서 왼쪽으로 적용되므로 순서는 진정으로 결과를 변경합니다: translate 그런 다음 rotate 는 요소를 이동한 다음 제자리에서 회전시키는 반면,translate 는 축을 먼저 회전시키고 요소를 비스듬히 보냅니다.

모든 것이 브라우저에서 발생합니다. Grow,Rotate, Flip 또는 3D Card 와 같은 사전 설정에서 시작하여 각 기능을 미세 조정하고 선언문을 복사하십시오. 도구는 실제로 변경 한 기능 만 작성하므로 중복 스케일 (1) 또는 rotate (0deg) 를 발송하지 않습니다. 계정도 업로드도없고 페이지가로드되면 오프라인으로 계속 작동합니다.

두 가지 세부사항은 실제 디버깅 시간을 절약해 줍니다. 첫째,3D 회전은 원근법이 존재할 때만 3 차원으로 보입니다 - 이 도구가 방출하는 것과 같은 변환에서 먼저 원근법() 함수이거나 부모에 대한 원근법 속성입니다 - 그렇지 않으면 rotateY 는 단순히 요소를 평평하게 스쿼시합니다. 둘째,아무것도 아닌 변환을 가진 모든 요소는 고정되고 절대적으로 배치된 자손에 대한 포함 블록이 되며 필터 속성과 정확히 같은 새로운 스태킹 컨텍스트를 생성합니다. 위치: 변환된 부모 내부의 고정 자식은 뷰포트가 아닌 해당 부모에 고정되며 이전에 작동했던 z-index 순서는 변경될 수 있습니다. 변환이 외관과 무관한 방식으로 레이아웃을 중단하면 포함 블록 동작이 거의 항상 그 이유입니다.