[html] 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);
그리고 수직 뒤집기는 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);
데모:
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 ✂</span>
<span class='flip_V'>Demo text ✂</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/#search=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);
}답변
크로스 브라우저 호환성을 위해이 클래스를 작성하십시오.
.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>왼쪽에 손잡이가있는 검색 아이콘을 얻으려면
답변
이를 위해 ‘변형’을 사용할 수 있습니다.
http://jsfiddle.net/aRcQ8/
CSS :
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);