CSS를 사용하여 텍스트를 미러링/플립할 수 있습니까?

programing

CSS를 사용하여 텍스트를 미러링/플립할 수 있습니까?

codeshow 2023. 10. 14. 10:47

CSS를 사용하여 텍스트를 미러링/플립할 수 있습니까?

텍스트 미러링을 위해 CSS/CSS3를 사용할 수 있습니까?

이 "( "" (✂오른쪽이 아닌 왼쪽을 가리키도록 표시합니다.

이를 위해 CSS 변환을 사용할 수 있습니다.수평 플립은 다음과 같이 div의 스케일을 조정하는 것입니다.

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-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);

데모:

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

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

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

두 개의 파라미터는 X축이고 Y축, -1은 미러이지만 원하는 크기로 원하는 대로 원하는 크기로 확장할 수 있습니다.입니다입니다.(-1, -1).

지난 2011년 크로스 브라우저 지원에 사용할 수 있는 최고의 옵션에 관심이 있다면 이전 답변을 참조하십시오.

실제 거울:

.mirror{
    display: inline-block; 
    font-size: 30px;

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

<span class='mirror'>Mirror Text<span>

사용할 수 있습니다.

.your-class{ 
      position:absolute; 
      -moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      transform: scaleX(-1); 
      filter: FlipH;  
}

아니면

 .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}

주의할 점은 다음과 같습니다.position.absolute매우 중요합니다!다를 display: inline-block;

저는 이 솔루션을 인터넷을 샅샅이 뒤지며 만들어냈습니다.

스택 오버플로 답변,
MSDN 기사,
http://css-tricks.com/almanac/properties/t/transform/,
http://caniuse.com/ #검색=transform,
http://browserhacks.com/, 및
http://www.useragentman.com/IETransformsTranslator/ .

이 은 + 를하는 IE6+를 포함한 모든 하는 것으로 .scale(-1,1) 및 울)울filter/-ms-filter필요한 경우 속성(IE6-8):

/* Cross-browser mirroring of content. Note that CSS pre-processors
  like Less cough on the media hack. 

  Microsoft recommends using BasicImage as a more efficent/faster form of
  mirroring, instead of FlipH or some kind of Matrix scaling/transform.
  @see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
  @see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/

/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
  and mirroring something that's already mirrored results in no net change! */
@media \0screen {
  .mirror {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
  }
}
.mirror {
  /* IE6 and 7 via hack */
  *filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
  /* Standards browsers, including IE9+ */
  -moz-transform: scale(-1,1);
  -ms-transform: scale(-1,1);
  -o-transform: scale(-1,1); /* Op 11.5 only */
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}

도 rotateY진짜 거울을 위해서는:

transform: rotateY(180deg);

아마도, 그것은 훨씬 더 분명하고 이해할 수 있습니다.

편집: 하지만 오페라에서는 작동하지 않는 것 같습니다. 슬프게도.하지만 파이어폭스에서는 잘 작동합니다.우리가 어떤 종류의 일을 하고 있다는 것을 암시적으로 말하는 것이 필요할 수도 있다고 생각합니다.translate3d아마도? 아니면 그런 비슷한 것.

교차 브라우저 호환성을 위해 이 클래스를 만듭니다.

.mirror-icon:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

아이콘 클래스에 추가합니다.

<i class="icon-search mirror-icon"></i>

왼쪽에 손잡이가 있는 검색 아이콘을 얻다

이를 위해서는 'transform'를 사용할 수 있습니다.http://jsfiddle.net/aRcQ8/

CSS:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);

수평 및 수직 미러 플립을 위한 작업 데모만 추가하면 됩니다.

.horizontal-flip {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.vertical-flip {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

<div class="horizontal-flip">
  Hello, World
  <input type="text">
</div>
<hr>
<div class="vertical-flip">
  Hello, World
  <input type="text">
</div>

이 기능은 's7 획 아이콘' 및 '폰트-멋진'과 같은 글꼴 아이콘에서도 잘 작동합니다.

.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

그 다음에 대상 요소에 대해:

<button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>

캐릭터가 뒤집힐 수 있는 방법을 한 가지 더 예로 들겠습니다.필요한 경우 벤더 접두사를 추가하지만 현재는 모든 최신 브라우저에서 고정되지 않은 변환 속성을 지원합니다.Opera Mini 모드가 활성화된 경우(~3%의 세계 사용자), 유일한 예외는 Opera입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Text rotation</title>
  <style type="text/css" media="screen">
    .scissors {
      display: inline-block;
      font-size: 50px;
      color: red;
    }
    .original {
      color: initial;
    }
    .flipped {
      transform: rotateZ(180deg);
    }
    .upward {
      transform: rotateZ(-90deg);
    }
    .downward {
      transform: rotateZ(90deg);
    }
  </style>
  
</head>
<body>
  <ul>
    <li>Original: <span class="scissors original">&#9986;</span></li>
    <li>Flipped: <span class="scissors flipped">&#9986;</span></li>
    <li>Upward: <span class="scissors upward">&#9986;</span></li>
    <li>Downward: <span class="scissors downward">&#9986;</span></li>
  </ul>
</body>
</html>

우리는 매우 적은 코드와 CSS 키프레임을 사용하여 꽤 멋진 텍스트 효과를 만들 수 있습니다.alternate속성(제거 시도)alternate차이 확인):

span {
  font-weight: 1000; font-size: 3.3em;
}
small {
  display: inline-block;
  font-size: 2.3em;
  animation: 1s infinite alternate coolrotate
}

@keyframes coolrotate {
  from {
    transform: scale(1, 1) translate(-0.1em, 0)
  }
  to {
    transform: scale(-1, 1) translate(0, 0)
  }
}

<span>
  <span>c</span>
  <small>o</small>
  <span>o</span>
  <small>L</small>
  <small>...</small>
</span>

이것이 제게 도움이 된 것입니다.<span class="navigation-pipe">></span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

디스플레이만 있으면 됩니다. inline 블록 또는 블록을 돌려야 합니다.그래서 기본적으로 첫 번째 답이 좋습니다.하지만 -180은 효과가 없었습니다.

박스 리플렉트를 시도해보실 수 있습니다.

box-reflect: 20px right;

CSS 속성 상자 반영 호환성 참조?자세한 것은

direction: rtl;아마도 당신이 찾고 있는 것일 겁니다.

언급URL : https://stackoverflow.com/questions/5406368/can-you-use-css-to-mirror-flip-text

'programing' 카테고리의 다른 글

데이터베이스 풀링이란 무엇입니까? (0)	2023.10.14
signalR : /signalr/hubs가 생성되지 않음 (0)	2023.10.14
POST 변수 가져오기 (0)	2023.10.14
디스크에 쓰지 않고 AWS S3의 텍스트 파일을 팬더로 가져오는 방법 (0)	2023.10.14
CSS 스타일 각진 방법JS 지시? (0)	2023.10.14

현재글CSS를 사용하여 텍스트를 미러링/플립할 수 있습니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

Python, Excel, bash, JSON, sql-server, CSS, oracle, Spring, AngularJS, Ajax, reactjs, SWiFT, mariaDB, jQuery, WordPress, spring-boot, PowerShell, C, Android, MySQL,

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

codeshow

CSS를 사용하여 텍스트를 미러링/플립할 수 있습니까?

CSS를 사용하여 텍스트를 미러링/플립할 수 있습니까?

데모:

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

CSS를 사용하여 텍스트를 미러링/플립할 수 있습니까?

CSS를 사용하여 텍스트를 미러링/플립할 수 있습니까?

데모:

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바