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);
}
Notice that setting position to absolute is very important! If you won't set it, you will need to set display: inline-block;
I cobbled together this solution by scouring the Internet including
- Stack Overflow answers,
- MSDN articles,
- http://css-tricks.com/almanac/properties/t/transform/,
- http://caniuse.com/#search=transform,
- http://browserhacks.com/, and
- http://www.useragentman.com/IETransformsTranslator/.
This solution seems to work in all browsers including IE6+, using scale(-1,1) (a proper mirror) and appropriate filter/-ms-filter properties when necessary (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);
}
For cross browser compatibility create this class
.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);
}
And add it to your icon class, i.e.
<i class="icon-search mirror-icon"></i>
to get a search icon with the handle on the left
you can use 'transform' to achieve this. http://jsfiddle.net/aRcQ8/
css:
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
There's also the rotateY for a real mirror one:
transform: rotateY(180deg);
Which, perhaps, is even more clear and understandable.
EDIT: Doesn't seem to work on Opera though… sadly. But it works fine on Firefox. I guess it might required to implicitly say that we are doing some kind of translate3d perhaps? Or something like that.
Just adding a working demo for horizontal and vertical mirror flip.
.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>this is what worked for me for <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);
just need display:inline-block or block to rotate. So basically first answer is good. But -180 didn't worked.
You could try box-reflect
box-reflect: 20px right;
see CSS property box-reflect compatibility? for more details
Just one more example how the character could be flipped. Add vendor prefixes if you need ones but for now all modern browsers support unprefixed transform property. The only exception is Opera if Opera Mini mode is enabled (~3% world users).
<!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">✂</span></li>
<li>Flipped: <span class="scissors flipped">✂</span></li>
<li>Upward: <span class="scissors upward">✂</span></li>
<li>Downward: <span class="scissors downward">✂</span></li>
</ul>
</body>
</html>참고URL : https://stackoverflow.com/questions/5406368/can-you-use-css-to-mirror-flip-text
'Programing' 카테고리의 다른 글
| Laravel 레코드가 있는지 확인 (0) | 2020.04.28 |
|---|---|
| ID와 클래스의 차이점은 무엇입니까? (0) | 2020.04.28 |
| <% = f.submit %>에 CSS 클래스 추가 (0) | 2020.04.28 |
| 두 개의 PHP 객체를 병합하는 가장 좋은 방법은 무엇입니까? (0) | 2020.04.27 |
| .crt를 .pem로 변환하는 방법 (0) | 2020.04.27 |