CSS 변환으로 텍스트를 가로 및 세로로 뒤집을 수 있나요?

CSS를 사용하여 텍스트 뒤집기

CSS를 사용하여 텍스트를 조작하여 방향을 대칭시키거나 뒤집는 것이 가능합니까? 이 질문은 가위 문자를 오른쪽에서 왼쪽으로 뒤집는 등 특정 문자나 텍스트를 반대 방향으로 표시해야 하는 시나리오를 접할 때 발생합니다.

답변:

예, CSS 변환은 텍스트를 미러링하거나 뒤집는 기능을 제공합니다. 이를 달성하려면 scale() 함수를 사용할 수 있습니다.

가로 뒤집기:

가로 뒤집기는 x축에서 텍스트의 방향을 반대로 바꿔서 마치 반대 방향을 가리키는 것처럼 보입니다. 이를 달성하려면 요소의 크기를 -1배로 수평으로 조정하세요.

<code class="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);</code>

수직 뒤집기:

마찬가지로 수직 뒤집기는 y를 따라 텍스트를 뒤집습니다. -축, 수직 방향을 반대로 바꿉니다. 이렇게 하려면 요소의 수직 크기를 -1만큼 조정하세요.

<code class="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);</code>

예:

다음은 HTML과 CSS를 사용하여 뒤집기 효과를 보여주는 예입니다.

<code class="html"><span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span></code>

<code class="css">span {
  display: inline-block;
  margin: 1em;
}
.flip_H {
  transform: scale(-1, 1);
  color: red;
}
.flip_V {
  transform: scale(1, -1);
  color: green;
}</code>

이 CSS를 사용하면 첫 번째 범위(flip_H)의 가위 문자는 왼쪽을 향하여 수평으로 미러링되고, 두 번째 범위(flip_V)의 문자는 위쪽을 향하여 수직으로 반전됩니다. 아래로.

위 내용은 CSS 변환으로 텍스트를 가로 및 세로로 뒤집을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!