Bạn có thể sử dụng CSS để phản chiếu / lật văn bản không?

Có thể sử dụng CSS / CSS3 để phản chiếu văn bản không?

Cụ thể, tôi có chiếc kéo char char ✂ (( ✂) mà tôi muốn hiển thị chỉ trái và không phải.

Bạn có thể sử dụng các phép biến đổi CSS để đạt được điều này. Một lật ngang sẽ liên quan đến việc nhân rộng div như thế này:

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

Và một cú lật dọc sẽ liên quan đến việc nhân rộng div như thế này:

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

BẢN GIỚI THIỆU:

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);

Hai tham số là trục X và trục Y, -1 sẽ là một tấm gương, nhưng bạn có thể mở rộng theo bất kỳ kích thước nào bạn muốn phù hợp với nhu cầu của bạn. Lộn ngược và ngược lại sẽ được (-1, -1).

Nếu bạn quan tâm đến tùy chọn tốt nhất có sẵn cho hỗ trợ trình duyệt chéo vào năm 2011, hãy xem câu trả lời cũ hơn của tôi .

Gương thật:

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

Bạn có thể sử dụng

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

hoặc là

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

Chú ý rằng thiết lập positionđể absolutelà rất quan trọng! Nếu bạn không đặt nó, bạn sẽ cần phải đặt display: inline-block;

Tôi đã cùng nhau tìm ra giải pháp này bằng cách truy quét Internet bao gồm cả

• Câu trả lời chồng chéo,
• Bài viết MSDN,
• http://css-tricks.com/almanac/properIES/t/transform/ ,
• http://caniuse.com/#search=transform ,
• http://browserhacks.com/ và
• http://www.useragentman.com/IETransformsTranslator/ .

Giải pháp này dường như hoạt động trong tất cả các trình duyệt bao gồm IE6 +, sử dụng scale(-1,1)(một máy nhân bản phù hợp) và thích hợp filter/ -ms-filterthuộc tính khi cần thiết (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);
}

Để tương thích trình duyệt chéo, hãy tạo lớp này

.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);
}

Và thêm nó vào lớp biểu tượng của bạn, tức là

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

để có được một biểu tượng tìm kiếm với tay cầm bên trái

bạn có thể sử dụng 'biến đổi' để đạt được điều này. http://jsfiddle.net/aRcQ8/

css:

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

Ngoài ra còn có rotateYmột chiếc gương thật:

transform: rotateY(180deg);

Mà, có lẽ, thậm chí còn rõ ràng và dễ hiểu hơn.

EDIT: Dường như không hoạt động trên Opera mặc dù rất buồn. Nhưng nó hoạt động tốt trên Firefox. Tôi đoán nó có thể được yêu cầu ngầm nói rằng chúng tôi đang làm một số loại translate3dcó lẽ? Hoặc điều tương tự.

Chỉ cần thêm một bản demo làm việc cho lật gương ngang và dọc.

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

đây là những gì làm việc cho tôi <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);

chỉ cần hiển thị: khối nội tuyến hoặc khối để xoay. Vì vậy, về cơ bản câu trả lời đầu tiên là tốt. Nhưng -180 đã không hoạt động.

Bạn có thể thử phản xạ hộp

box-reflect: 20px right;

xem khả năng tương thích hộp thuộc tính CSS? để biết thêm chi tiết

Chỉ một ví dụ nữa làm thế nào nhân vật có thể được lật. Thêm tiền tố của nhà cung cấp nếu bạn cần, nhưng hiện tại tất cả các trình duyệt hiện đại đều hỗ trợ thuộc tính biến đổi chưa được trộn. Ngoại lệ duy nhất là Opera nếu chế độ Opera Mini được bật (~ 3% người dùng thế giới).

<!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; có lẽ là những gì bạn đang tìm kiếm.

Điều đó hoạt động tốt với các biểu tượng phông chữ như 's7 biểu tượng đột quỵ' và 'phông chữ tuyệt vời' :

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

Và sau đó vào phần tử đích:

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