이 기사에서는 Transform In을 이해합니다. 자세히 설명하고 자세한 실제 데모를 따라 가십시오. 이 기사에서는 다음 사항을 다룰 것입니다.
웹 사이트 기능이 향상됨에 따라 웹 사이트에 현명한 통합을 제공하여 매력적이고 더 좋게 만드는 것도 똑같이 중요합니다. 사이트를 보완하는 다양한 CSS 요소를 추가하는 것은 시간이 필요합니다.
사람들은 대중의 관심을 끌지 않는 웹 사이트를 멀리합니다. 따라서 일부 요소를 변환하고 더 적은 압축 값으로 CSS를 아름답게 만드는 것은 어떨까요?
유사한 요구를 충족하기 위해 요소를 기울이거나, 회전하거나, 크기 조정하거나, 변환하여 요소를 변환하는 transform CSS 속성이 있습니다.
CSS 변환이란 무엇입니까?
CSS 요소를 변환하는 것은 2D 또는 3D 형식으로 가장자리를 제공하는 것을 의미합니다. 요소의 스타일을 시각적으로 변경합니다.
2D 변환은 X 및 Y 축에서 작동합니다. 두 축 모두에 모서리 또는 구조를 제공하여 변경할 수 있습니다. 3D 변환의 경우 필요한 깊이를 제공하려면 X, Y 및 Z 축에서 작업해야합니다.
CSS 2D 변환 속성 :
| 함수 | 기술 |
매트릭스( n, n, n, n, n, n ) | 6 개 값으로 구성된 행렬 |
옮기다( x, y ) | 요소가 X 축 및 Y 축을 따라 이동할 수 있습니다. |
translateX ( 엔 ) | 요소가 X 축을 따라 이동할 수 있습니다. |
translateY ( 엔 ) | 요소가 Y 축을 따라 이동할 수 있습니다. |
규모( x, y ) | 요소의 너비와 높이를 변경합니다. |
scaleX ( 엔 ) | 요소의 너비를 변경합니다. |
scaleY ( 엔 ) | 요소 높이 변경 |
회전 ( 각도 ) | 매개 변수에 지정된 각도로 요소를 회전 할 수 있습니다. |
비스듬한( x 각, y 각 ) | X 축과 Y 축을 따라 요소를 기울입니다. |
skewX ( 각도 ) | X 축을 따라 요소를 기울입니다. |
skewY ( 각도 ) | Y 축을 따라 요소를 기울입니다. |
CSS 3D 변환 속성 :
특성 | 기술 |
변환 | 요소에 2D 또는 3D 변환을 적용합니다. |
변환 출처 | 변형 된 요소의 위치를 변경할 수 있습니다. |
변형 스타일 | 중첩 된 요소가 3D 공간에서 렌더링되는 방식을 지정합니다. |
원근법 | 3D 요소를 보는 방법에 대한 관점을 지정합니다. Linux에 Hadoop을 설치하는 방법 |
원근 출처 | 3D 요소의 하단 위치를 지정합니다 |
뒷면 가시성 | 화면을 향하지 않을 때 요소를 표시할지 여부를 정의합니다. |
예를 들면 :
css .element {너비 : 20px 높이 : 20px transform : scale (20)}이제 이렇게하면 정의 된 요소의 크기가 20 배로 조정됩니다.
뿐만 아니라 수평 확장 및 수직 확장을 위해 축을 현명하게 확장 할 수도 있습니다.
변환 : scaleX (2) 변환 : scaleY (.5)
모든 브라우저에서 적절한 변환을 제공하려면 다음을 수행 할 수 있습니다.
div {-webkit-transform : scale (1.5) -moz-transform : scale (1.5) -o-transform : scale (1.5) transform : scale (1.5)}transform CSS 속성은 CSS 시각적 서식 수준의 좌표 공간을 개선합니다.
시각적 서식 수준이란 무엇입니까?
시각적 서식 수준은 문서를 처리하고 미디어 플랫폼에 시각적으로 표시하는 것을 의미합니다. 시각적 서식을 사용하면 각 요소를 CSS 상자 모델과 일치하는 모델로 변환 할 수 있습니다. CSS 상자 모델은 크기, 위치 및 속성을 정의하는 표준 직사각형 상자 형식의 요소를 정의합니다.
노트 : 변형 가능한 요소 만 변형 할 수 있습니다.
다양한 변형 속성은 무엇입니까?
모든 변형 속성을 살펴 보겠습니다.
1. 스케일 () : 크기 조정은 요소의 크기를 가로 또는 세로로 변경하는 것을 의미합니다.
수직 확장의 경우 :scaleX
수평 확장의 경우 :scaleY
요소의 경우 글꼴 크기, 패딩, 높이 또는 너비를 변경할 수도 있습니다. 기본값은 1입니다. 즉, 값이 절반이면 0.5를 제공하고 2를 제공하면 배율이 두 배가됩니다.
2. skew () : Skew 속성을 사용하면 사용자가 한 좌표 점에서 오른쪽 또는 왼쪽으로 요소를 기울일 수 있습니다. 직사각형을 평행 사변형으로 바꾸는 것과 거의 같습니다. 좌표로 요소를 기울일 수 있습니다.
예:
.element {변형 : skewX (25deg)} .element {변형 : skewY (25deg)이렇게하면 skewX 또는 skewY를 사용하여 요소가 가로 및 세로로 25도 기울어집니다.
3. rotate ( ) :이 속성을 사용하여 요소를 시계 방향으로 회전 할 수 있습니다. 180도 또는 360도 회전하여 원래 위치로 되돌릴 수 있습니다.
.element {transform : rotate (25deg)}회전도 제공하기 위해 rotateX, rotateY 또는 rotateZ의 세 가지 차원 중 하나를 사용할 수 있습니다.
4. 번역 ( ) : 요소를 거꾸로 또는 옆으로 올바르게 이동할 수 있습니다.
.element {transform : translate (20px, 10px)}번역은 지정된 개체 / 요소를 거꾸로 또는 옆으로 이동합니다. 첫 번째 지정된 값은 개체를 오른쪽으로 이동하고 (음수는 왼쪽으로 이동) 두 번째 값은 개체를 아래로 이동합니다 (음수 값을 지정하면 위쪽으로 이동).
혼란 스러울 경우 X 축을 적용하여 요소의 위치를 수평으로 변경하고 Y 축을 적용하여 위치를 수직으로 변경합니다. transform 속성에 대한 가장 놀라운 점은 transform을 적용하면 다른 모든 요소 나 텍스트는 그대로 유지하면서 요소 만 이동할 수 있다는 것입니다. 거리는 일반적으로 픽셀 또는 백분율로 표시됩니다.
예를 들면 :
.element {transform : translateX (값) transform : translateY (값)}5. perspective () : 요소의 원근감에 깊이를 제공 할 수 있습니다. 변환에서 입방체로 만들어 요소에 3D 변환을 줄 수 있습니다.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
z 축의 도입은 요소에 3D 시각화를 제공합니다. translateZ ()는 요소를 뷰어쪽으로 이동하고 음수 값은 멀리 이동합니다.
6. matrix () : 모든 변환을 하나로 결합합니다.
rotate (45deg) translate (24px, 25px)
matrix ()를 적용하면 모든 변형 속성이 하나의 배열에 결합됩니다.
변형 속성을 적용하면 요소를 크게 향상시킬 수 있으므로 웹 사이트의 매력을 높일 수 있습니다. 시도해보세요!
이것으로 CSS에서 변환에 대한이 기사의 끝으로 이동합니다.
웹 개발에 대해 자세히 알아 보려면 에듀 레카. 웹 개발 인증 교육은 HTML5, CSS3, Twitter Bootstrap 3, jQuery 및 Google API를 사용하여 인상적인 웹 사이트를 만들고 Amazon Simple Storage Service (S3)에 배포하는 방법을 배우는 데 도움이됩니다.
여전히 관심이 있으시면 질문이 있으시면 'What is CSS'블로그의 댓글 섹션에 게시 해 주시면 최대한 빨리 답변 드리겠습니다.