CSS 변환을 사용하여 텍스트를 가로 및 세로로 뒤집으려면 어떻게 해야 합니까?

CSS 변환을 사용하여 텍스트 뒤집기

CSS에서는 변환을 사용하여 텍스트와 기타 요소를 조작할 수 있습니다. 일반적인 변환 중 하나는 대칭 이동(뒤집기라고도 함)입니다. 이 효과는 간단한 CSS 속성을 사용하여 얻을 수 있습니다.

텍스트를 가로로 뒤집으려면(세로 축을 따라 대칭 이동) 다음 CSS 속성을 사용하세요.

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale( -1, 1);
transform: scale(-1, 1);

이 속성은 요소의 크기를 가로로 -1만큼 조정하여 세로 축을 따라 효과적으로 뒤집습니다.

마찬가지로 텍스트를 세로로 뒤집으려면(가로 축을 따라 미러링) 다음 속성을 사용하세요:

-moz-transform: scale(1, -1);
-webkit-transform : scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

이 속성을 적용하면 요소의 크기를 수직으로 -1만큼 조정하고 수평 축을 따라 뒤집습니다.

예

일부 텍스트와 가위 문자를 표시하는 다음 HTML 코드를 고려해 보세요.

데모 텍스트 ✂
데모 텍스트 ✂

아래 CSS 코드는 해당 범위에 수평 및 수직 뒤집기 효과를 적용합니다.

span{ 디스플레이: 인라인 블록; 여백:1em; }
.flip_H{ 변환: scale(-1, 1); 색상: 빨간색; }
.flip_V{ 변환: scale(1, -1); 색상:녹색; }

각 축을 따라 가위 문자를 미러링하여 원하는 왼쪽을 가리키는 가위를 만듭니다.

위 내용은 CSS 변환을 사용하여 텍스트를 가로 및 세로로 뒤집으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!