처음 가 rotateY 나는 카드를 스크린으로 기울게 할 것이라고 확신했고,그 대신에 평평하게 찌그러뜨렸다. 나는 이유를 이해하기 전에 오후의 더 좋은 부분을 잃었다. 원근법이 없었다. 나는 회전을 썼지 만 회전을 깊이로 읽는 하나의 함수는 쓰지 않았고,CSS 는 내가 의미하는 것보다 내가 말한 것을 정확하게했다. 그 오후가 내가 지금 값을 입력하고,저장하고, 상쾌하게하고,눈을 가늘게하는 대신 슬라이더를 끌고 상자가 반응하는 것을 보면서 변형을 만드는 전체 이유입니다.
CSS transform 속성은 언어에서 가장 유용한 것 중 하나이며 미묘하게 잘못되기 가장 쉬운 것 중 하나입니다. 주변의 어떤 것도 방해하지 않고 요소를 이동,회전, 확장 및 왜곡하기 때문에 모든 호버 효과,모든 카드 리프트,모든 입구 애니메이션이 기울어집니다. 그러나 많은 행동을 짧은 문자열로 포장하고 함수의 순서가 결과를 변경하며 3D 함수는 충돌 할 때까지 보이지 않는 종속성을 갖습니다. 당신이 볼 수있는 값은 당신이 상상해야하는 값보다 훨씬 더 가치가 있습니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 CSS 변환 생성기 모든 함수에 대해 슬라이더를 제공하고,translate, rotate,scale, skew 및 rotateX,rotateY 및 perspective 의 3D 트리오를 변환하고,스큐하고, 스큐하고,만들 때 라이브 미리보기 요소에 각 변경 사항을 적용합니다. 또한 회전 및 스케일링이 피벗하는 앵커 포인트인 transform-origin 을 설정할 수 있습니다. 정확한 선언은 아래 복사 준비 상자에 있으며,만진 함수만 포함되어 있습니다.
TL;DR: CSS
transform속성 재배치 및 페이지 레이아웃에 영향을 주지 않고 요소를 다시 형성,이는 호버 효과 및 애니메이션에 적합한 도구가 되는 이유입니다. 기능은 오른쪽에서 왼쪽으로 적용되므로 주문이 중요합니다; 3D 회전은 a 가 필요합니다perspective()3 차원적으로 보기 위해; 그리고 변형된 어떤 요소라도 그것의 고정되고 절대적인 자식들을 위한 포함 블록이 된다. 이 생성기는 모든 함수를 라이브 프리뷰로 노출시키고,당신이 변경한 함수들만 내보내며,당신이 스타일시트에 바로 붙여넣을 수 있는 깨끗한 CSS 를 생성한다. 그것은 가입 없이 브라우저에서 완전히 실행된다.
CSS 변환 생성기는 어떤 문제를 해결합니까?
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 transform 속성은 CSS Grid 가 추상적 인 것과 같은 방식으로 추상적입니다. 당신은 픽셀을 직접 이동하지 않습니다; 당신은 기하학적 연산을 설명하고 브라우저가 결과를 계산하게하고 있습니다. translateX(40px) rotate(15deg) scale(1.1) 는 정확한 지시이지만,텍스트만으로 그 세 가지를 묶은 결과를 느낄 방법이 없습니다. 렌더링해야 합니다. 그리고 자신의 프로젝트에서 렌더링한다는 것은 쓰기-저장-새로 고침 루프를 의미하며,대부분의 사람들이 원하는 값을 찾기 훨씬 전에 실험을 멈출 정도로 느립니다.
발전기는 그 고리를 아무 것도 아닌 것으로 붕괴시킵니다. 회전 슬라이더를 드래그하면 상자가 실시간으로 회전합니다. 스케일을 올리면 중앙에서 커집니다. 번역을 추가하면 차례를 지키면서 미끄러집니다. 이것의 10 분과 숫자와 모션 사이의 관계는 머릿속에서 번역하는 것이 아니라 느끼는 것이 됩니다. 작업이 끝나면 전사 할 것이 없습니다. 왜냐하면 작업중인 CSS 가 당신을 위해 전체 시간 동안 작성 되었기 때문입니다.
보이는 것보다 더 중요한 두 번째 이점이 있습니다. 조작을 통해 변환을 구축한다는 것은 도구가 유효하고 잘 구성된 CSS 만 방출 할 수 있음을 의미합니다. 당신은 깨진 생산할 수 없습니다 transform 슬라이더를 드래그하여 값을 계산하므로 출력은 항상 붙여넣기에 안전합니다. 그 신뢰성은 시각적 CSS 빌더의 선반을 가까이 두는 이유이며,내가 도달하는 이유와 같습니다 박스-섀도 생성기 그림자 오프셋을 손으로 세는 것이 아니라.
변환 함수의 순서가 중요한 이유는 무엇입니까?
이것은 사람들을 가장 많이 넘어뜨리는 단 하나의 세부사항이며,일하기보다는 이해할 가치가 있습니다. 여러 기능을 하나로 나열하면 transform를,브라우저는 그들을 오른쪽에서 왼쪽으로 적용하고,각각은 이전이 남긴 좌표 공간에서 동작합니다. 즉,요소가 끝나는 곳에서 순서가 진정으로 바뀝니다.
가져가다 translateX(100px) rotate(45deg) 대 rotate(45deg) translateX(100px). 첫번째에서,요소는 백 화소를 번역하고 그 후에 제자리에서 자전합니다,그래서 오른쪽으로 백 화소를 앉고 45 도 돌았습니다. 두번째에서는,회전이 첫째로 일어나,element's 좌표 축을 돌고,그 후에 번역은 그것을 따라서 백 화소를 움직입니다 회전된 X 축, 대각선으로 아래쪽과 오른쪽으로 보냅니다. 같은 두 함수, 같은 두 값, 완전히 다른 위치.
생성기는 의도적인 순서로 함수를 방출합니다. 먼저 원근법을 사용한 다음 번역하고 회전한 다음 크기를 조정하고 기울입니다. 이는 일반적인 경우를 직관적으로 동작하게 하는 합리적인 기본값입니다. 그러나 일단 순서가 의미가 있다는 것을 이해하면 변환을 한 장소에서 다른 장소로 복사하면 때때로 예상하지 못한 결과가 생성되는 이유도 이해하게 됩니다: 문자열을 이동했지만 그 뒤에 있는 정신 모델을 직접 구축하고 각 function's 기여를 보는 것이 해당 모델이 구축되는 방식입니다.
3D 변환을 3D로 보이게 하려면 어떻게 해야 하나요?
여기 그날 오후에 나에게 비용을 지불한 함정이 있습니다. 기능 rotateX 그리고 rotateY 요소를 수평 및 수직 축 주위로 돌리면 페이지가 돌아가는 것처럼 기울어 지거나 멀어지게됩니다. 그러나 기본적으로 장면에는 깊이가 없으므로 회전이 화면의 평평한 평면에 직선으로 투사되고 요소가 단순히 압축 된 것처럼 보입니다. A rotateY(60deg) 원근감이 없으면 요소가 회전하는 것이 아니라 좁아지는 것처럼 보입니다.
빠진 성분은 perspective를,그리고 공급하는 방법은 두가지가 있습니다. a 를 넣을 수 있습니다 perspective 모든 3D 하위 항목에 대해 공유 소실점을 설정하는 상위 요소의 속성 또는 다음을 추가할 수 있습니다 perspective() 요소의 맨 처음에 기능's 자신의 transform그 한 요소에 자신만의 깊이를 주는,이 생성기는 두번째 접근법을 사용합니다: 원근 슬라이더를 설정하면 방출됩니다 perspective() 체인의 첫 번째, 정확히 있어야 할 위치. 더 작은 값, 어딘가에 삼백 육백 픽셀, 소실점을 요소에 가까이 배치하고 깊이를 극적으로; 더 큰 값은 부드러운 기울기로 효과를 평평하게.
도구에 미리 설정된 3D 카드는 이것을 보는 가장 빠른 방법입니다. 그것은 육백 픽셀과 a 의 관점을 설정합니다 rotateY 25도 각도로 미리보기 상자가 화면에 설득력 있게 기울어집니다. 원근 슬라이더를 다시 0으로 돌리고 동일한 회전 붕괴가 평평한 스쿼시로 무너지는 것을 지켜보세요. 전후가 두 번의 드래그로 전체 수업입니다.
Transform-origin 은 무엇을 하는가?
모든 회전과 모든 스케일은 회전하기 위해 고정된 점이 필요하며,그 점이 변환-원점입니다. 기본적으로 요소의 막다른 중심에 위치하므로 수정되지 않은 것입니다 rotate 중앙과 수정되지 않은 상자를 회전시킵니다 scale 한 번에 모든 방향으로 바깥쪽으로 성장시킵니다. 원점을 이동하면 두 동작이 모두 변경됩니다.
원점을 로 설정합니다 top left 그리고 회전은 스윙이 되고,요소는 힌지 표지판처럼 왼쪽 상단에서 회전합니다. 로 설정합니다 bottom 그리고 a scaleY 요소를 대칭적으로 확장하지 않고 베이스에서 위쪽으로 성장시킵니다. 이는 차트의 축에서 올라가야 하는 막대에 대해 원하는 것과 정확히 같습니다. 생성기는 9개의 키워드 위치, 중앙, 4개의 모서리 및 4개의 모서리를 모두 제공하고 하나를 선택하는 순간 미리보기를 업데이트하므로 스핀과 스윙의 차이는 한 번의 클릭 간격으로 발생합니다.
이것은 당신이 그것을 필요로 할 때까지 거의 보이지 않는 속성 중 하나이며,다음 당신이 추구하는 효과를 생산하는 유일한 것입니다. 그것의 상단 가장자리에서 펼쳐야 메뉴,그것이 속한 요소 밖으로 확장해야 툴팁,그것의 중간이 아닌 모서리를 중심으로 회전해야 카드,그들 모두는 변환 - 기원이며,그들 중 어느 것도에서 분명하지 않습니다 transform 가치만.
왜 transform 은 다른 요소들을 밀어붙이지 않는가?
의 가장 유용한 속성 중 하나 transform 또한 사람들이 처음 물었을 때 가장 놀랍다고 생각하는 요소이기도 합니다. 변환된 요소는 주변의 레이아웃에 영향을 미치지 않습니다. 상자를 오른쪽으로 40픽셀로 변환하면 오른쪽으로 40픽셀을 렌더링하지만 여전히 문서 흐름에 원래 공간을 확보하므로 공백을 메우기 위해 다른 어떤 것도 움직이지 않고 옆으로 밀리지 않습니다. 변환은 레이아웃이 이미 계산된 후에 적용되는 페인트 시간 효과입니다.
이것은 버그가 아닌 기능이며,바로 이것이 transform 을 애니메이션에 대한 올바른 도구로 만드는 것입니다. 왜냐하면 요소를 로 이동하기 때문입니다 transform 리플로우를 트리거하지 않습니다, 브라우저는 GPU에 변화를 합성하고 초 육십 프레임에서 애니메이션을 유지할 수 있습니다. 와 같은 요소를 이동 top 또는 left 또는 margin 브라우저가 모든 단일 프레임에서 레이아웃을 다시 계산하도록 강제하며,이는 프레임을 더듬고 떨어뜨리는 애니메이션의 가장 일반적인 원인입니다. 부드러운 모션을 원한다면 애니메이션을 적용합니다 transform 그리고 opacity그리고 레이아웃 속성은 그대로 둡니다. 리플로우할 주변 콘텐츠가 필요할 때 이는 변환이 아닌 레이아웃 변경을 원하는 표시이며 다음과 같은 도구입니다 플렉스박스 생성기 또는 the CSS 그리드 생성기 시작하기에 적합한 장소입니다.
왜 고정된 아이가 변형된 요소 안에서 부서졌을까?
이것은 관련이 없는 무언가의 버그처럼 보이는 잡담이며,한 시간 비용이 들기 전에 알 가치가 있습니다. 사양에는 a 가 있는 모든 요소가 있다고 나와 있습니다 transform 이외의 가치 none 위치하는 자손을 위한 격리 블록이 됩니다 fixed 또는 absolute그리고,그것은 또한 새로운 스태킹 컨텍스트를 만듭니다. 그 둘 다 변환 자체에서 멀리 표면화되는 결과를 가지고 있습니다.
봉쇄-블록 변화는 사람들을 놀라게 하는 변화다.A position: fixed element 는 페이지 스크롤로 유지되는 뷰포트에 고정되도록 되어 있습니다. 그러나 그 고정 요소의 어떤 조상이 변환을 가지고 있다면,고정 요소는 에 고정됩니다 그 조상 대신,갑자기 당신의 "fixed" 헤더가 콘텐츠와 함께 스크롤되거나 모달이 카드 안에 갇히게됩니다. transform's 외관에 대한 어떤 것도 이것을 암시하지 않습니다; 요소는 괜찮아 보이고,세 단계 아래로 내려가는 무언가가 잘못 위치합니다. 고정되거나 절대 요소가 갇힌 것처럼 행동 할 때 가장 먼저 확인해야 할 것은 조상이 변환을 수행하는지 여부입니다. 스태킹 컨텍스트 변경은 병렬 클래스의 혼란을 야기합니다 z-index 예전에는 갑자기 작동하지 않았습니다. 변형된 요소가 자식을 자체 스태킹 레이어로 밀봉했기 때문입니다. 정확히 동일한 동작이 적용됩니다 filter 속성, 이것이 바로 속성입니다 CSS 필터 생성기 동일한 경고를 전달합니다.
발전기는 어떤 기능을 다루며, 각 기능에 언제 도달합니까?
이 도구는 일반적인 변환 함수의 전체 세트를 노출하며 무작위로 드래그하는 대신 각각이 무엇을 위한 것인지 아는 데 도움이 됩니다. 지도는 다음과 같습니다.
| 기능 | 하는 일 | 일반적인 사용 |
|---|---|---|
translateX / translateY |
요소를 축을 따라 이동합니다 | 슬라이드 인 입구, 호버 넛지, 오프셋 위치 지정 |
rotate |
요소를 중심(2D)으로 돌립니다 | 기울어진 배지, 회전하는 로더, 장난스러운 호버 각도 |
scale (X와 Y) |
요소가 성장하거나 축소됩니다 | 호버 줌, 팝 효과, 프레스 다운 피드백 |
skewX / skewY |
요소를 축을 따라 기울입니다 | 동적 배너, 이탤릭체 스타일 모양, 모션 큐 |
rotateX / rotateY |
3D 공간에서 요소를 돌립니다 | 카드 뒤집기, 틸팅 패널, 커버 흐름 효과 |
perspective |
깊이를 추가하여 3D 회전을 올바르게 읽습니다 | 항상 rotateX 또는 rotateY와 쌍을 이룹니다 |
파트너가 필요한 두 가지는 관점 없이는 설득력있는 일을하지 않는 3D 회전과 명확하지 않기 때문에 불러야 할 가치가있는 부정적인 척도입니다. 설정 scaleX 음수 값으로 요소를 거울처럼 수평으로 뒤집는 것이 Flip Horizontal 사전 설정이 작동하는 방식입니다. 이는 두 번째 자산을 내보내는 대신 아이콘을 미러링하는 진정으로 유용한 트릭이며 음수 값이 허용된다는 것을 알게 되면 스케일 제어에서 바로 제외됩니다.
생성기는 어떻게 미리보기를 정직하게 유지합니까?
어떤 시각적인 건축업자의 실패 형태는 시사 쇼와 수출한 부호가 생성하는 무슨 사이 편류이다. 그것의 시사에게 1 개의 방법을 렌더링하고 그것의 CSS 를 다른 것 쓰는 공구는 재생산하지 않을 가치를 가르치기 때문에,아무 공구도 전혀 보다는 더 나쁘다. 이 발전기는 preview's 인라인 작풍 및 동일한 기능에서 베껴진 선언을 건설해서 저것을 피한다,그래서 당신이 보는 무슨은 당신이 풀칠하는 것을 문자 그대로 동의하지 않을 수 있던 두번째 부호 경로가 없다.
그래서 출력에는 변경한 함수만 포함되는 것이기도 합니다. 떠나기 scale 하나의 정체성, 또는 rotate 0에서는 해당 함수가 중복으로 작성되지 않고 문자열에 단순히 없음을 의미합니다 scale(1) 소음. 깔끔한 변환은 한눈에 읽고 신뢰할 수 있는 변환이며, 의미 있는 기능만 방출하는 것은 시각적 CSS 도구 전반에 걸쳐 제가 의존하는 것과 동일한 분야입니다 그라디언트 생성기 박스-섀도우 빌더에게. 더 넓은 키트를 조립하는 경우 웹 개발자 툴킷 제가 가장 자주 여는 것들을 모아두는데, 잘 사용하는 습관은 개발자 생산성 도구 가이드.
CSS 변환을 지원하는 브라우저는 무엇입니까?
CSS 변환은 모든 현재 브라우저에서 지원되며 10 년 이상 잘되었습니다. 2D 기능,번역, 회전,축소 및 스큐는 보편적이고 접두사가 없으며 3D 기능도 함께 제공됩니다 perspective chrome,firefox, Safari 및 Edge 에서 똑같이 잘 지원됩니다. 이전 -webkit- 그리고 -moz- 한 때 필요했던 접두사는 오늘날 스타일시트의 자중이며,이 생성기의 출력은 표준이며,접두사가 붙지 않은 CSS 는 작성된 대로 출하할 수 있습니다. 권위 있는 규칙의 경우 W3C 의 CSS Transforms Module Level 1 및 Level 2 사양이 주요 소스이며,생성기가 이를 따를 수 있는 직관을 제공하면 읽을 가치가 있습니다.
이와 함께 더 넓은 시각적 툴킷을 구축하고 있다면 경계 반경 생성기 그리고 전환 빌더는 자연스러운 동반자입니다. 호버의 변환은 거의 항상 원활한 전환을 원하기 때문입니다. 여기에 있는 모든 것은 클라이언트 측에서 실행되며 복사하는 CSS는 런타임, 빌드 단계 및 종속성 없이 사용할 수 있습니다.
자주 묻는 질문
CSS 변환 생성기 란 무엇입니까?
CSS 변환 생성기는 선택한 설정에서 CSS 변환 값을 빌드하는 시각적 도구입니다. 슬라이더로 변환,회전, 크기 조정,스큐 및 3D 원근법을 조정하고 결과의 라이브 미리보기와 함께 변환 선언을 출력합니다.
변환 함수의 순서가 중요합니까?
예. 함수는 요소 좌표계에서 오른쪽에서 왼쪽으로 적용되므로 translate then rotate 는 rotate then translate 와 같지 않습니다. 먼저 번역하면 요소가 이동하고 그 다음에 제자리에서 회전합니다; 먼저 회전하면 축이 회전하므로 나중에 번역하면 각도로 꺼집니다.
CSS 변환을 3D로 보이게 하려면 어떻게 해야 하나요?
3D 회전은 깊이로 읽으려면 원근법이 필요합니다. 원근법 슬라이더를 설정할 때 이 생성기가 방출하는 변환 시작 시 원근법() 함수를 추가하거나 상위 요소에 원근법 속성을 넣습니다. 300~600 픽셀 정도의 값은 깊이를 가장 극적으로 만듭니다.
Transform-origin 은 무엇을 하는가?
transform-origin 은 transform 이 피벗하고 스케일링하는 점을 설정합니다. 기본값은 요소의 중심입니다. 모서리로 이동하면 회전은 해당 모서리에서 스윙이 됩니다; 모서리로 이동하면 모든 방향에서 바깥쪽이 아닌 해당 모서리에서 스케일링이 커집니다.
왜 transform 은 페이지의 다른 요소들을 이동시키지 않는가?
변환은 페인트-시간 효과입니다. 요소는 새로운 위치에서 렌더링되지만 여전히 레이아웃에 원래 상자를 예약하므로 주변에는 아무것도 이동하지 않습니다. 이것이 변환을 애니메이션에 이상적으로 만드는 이유이며 리플로우할 콘텐츠가 필요할 때 여백,위치 또는 레이아웃 속성을 사용하는 이유입니다.
왜 변형된 요소 안에서 고정되거나 절대적인 자식이 부서지는가?
none 이외의 변환을 가진 모든 요소는 고정되고 절대적으로 위치하는 자손에 대한 포함 블록이 되며 새로운 스태킹 컨텍스트를 생성합니다. 위치: 고정 자식은 뷰포트 대신 변환된 부모에 고정되며 z-index 순서는 변경될 수 있습니다. 화면에 고정된 상태로 유지되어야 하는 경우 변환된 요소 밖으로 자식을 이동합니다.
상단, 왼쪽, 너비 또는 높이 대신 변환을 애니메이션화해야 합니까?
예,스무스 모션을 위해. transform 과 opacity 는 GPU 에서 합성되고 레이아웃을 트리거하지 않으므로 60fps 로 애니메이션을 생성합니다. 상단,왼쪽, 너비 또는 높이를 애니메이션하면 브라우저가 모든 프레임에서 레이아웃을 다시 계산하게되며 이는 janky 애니메이션의 일반적인 원인입니다.
생성된 변환 CSS는 무료이며 안전하게 사용할 수 있습니까?
예. 이 도구는 가입이나 사용 제한이없는 완전 무료이며 모든 최신 브라우저에서 지원되는 표준의 접두사가없는 CSS 를 방출합니다. 모든 처리는 브라우저에서 이루어 지므로 아무 것도 업로드되지 않으며 도구는로드 된 후 오프라인으로 작동합니다.
