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 ✂</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/ #검색=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">✂</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>
우리는 매우 적은 코드와 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;
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 |