คุณสามารถใช้ 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 &#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 จะเป็นมิเรอร์ แต่คุณสามารถปรับขนาดตามขนาดที่คุณต้องการได้ ลง Upside (-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);

นอกจากนี้ยังมีrotateYสำหรับกระจกจริงหนึ่ง:

transform: rotateY(180deg);

ซึ่งบางทีอาจจะชัดเจนและเข้าใจได้มากกว่า

แก้ไข:ดูเหมือนจะไม่ทำงานบน Opera แต่…น่าเศร้า แต่มันใช้งานได้ดีบน Firefox ฉันเดาว่ามันอาจจำเป็นต้องพูดโดยปริยายว่าเรากำลังทำอะไรบางอย่างtranslate3d? หรืออะไรทำนองนั้น

เพียงเพิ่มตัวอย่างการทำงานสำหรับการพลิกกระจกแนวนอนและแนวตั้ง

.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>

นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน <span class="navigation-pipe">&gt;</span>

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

เพียงแค่ต้องการแสดง: อินไลน์บล็อกหรือบล็อกเพื่อหมุน ดังนั้นโดยทั่วไปคำตอบแรกนั้นดี แต่ -180 ไม่ทำงาน

คุณสามารถลองใช้กล่องสะท้อนแสง

box-reflect: 20px right;

เห็นCSS เข้ากันได้กับกล่องคุณสมบัติสะท้อน? สำหรับรายละเอียดเพิ่มเติม

อีกตัวอย่างหนึ่งที่สามารถพลิกตัวละครได้ เพิ่มคำนำหน้าผู้ขายหากคุณต้องการ แต่ตอนนี้เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับคุณสมบัติการแปลงที่ไม่ได้เตรียมการไว้ล่วงหน้า ข้อยกเว้นเพียงอย่างเดียวคือ Opera หากเปิดใช้งานโหมด Opera Mini (ผู้ใช้ทั่วโลกประมาณ 3%)

<!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>

direction: rtl; อาจเป็นสิ่งที่คุณกำลังมองหา

ใช้งานได้ดีกับไอคอนแบบอักษรเช่น's7 stroke icons'และ'font-Awesome' :

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

แล้วองค์ประกอบเป้าหมาย:

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