Làm thế nào để lật hình nền bằng CSS?

Làm thế nào để lật bất kỳ hình nền bằng CSS? Có thể không?

currenty Tôi đang sử dụng hình ảnh mũi tên này trong một background-imagesố litrong css

Bật: visitedTôi cần lật mũi tên này theo chiều ngang. Tôi có thể làm điều này để tạo một hình ảnh khác của mũi tên NHƯNG tôi chỉ tò mò muốn biết là có thể lật hình ảnh trong CSS cho:visited

Bạn có thể lật nó theo chiều ngang với CSS ...

a:visited {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

jsFiddle .

Thay vào đó, nếu bạn muốn lật theo chiều dọc ...

a:visited {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

Nguồn .

Tôi thấy tôi chỉ lật nền không phải toàn bộ yếu tố sau khi thấy manh mối lật trong câu trả lời của Alex. Cảm ơn alex vì câu trả lời của bạn

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

CSS

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

Xem ví dụ tại đây http://jsfiddle.net/qngrf/807/

Theo w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

Thuộc tính biến đổi được hỗ trợ trong Internet Explorer 10, Firefox và Opera. Internet Explorer 9 hỗ trợ một thuộc tính thay thế, biến đổi -ms (chỉ chuyển đổi 2D). Safari và Chrome hỗ trợ một thuộc tính thay thế, biến đổi -webkit (biến đổi 3D và 2D). Opera chỉ hỗ trợ chuyển đổi 2D.

Đây là một biến đổi 2D, do đó, nó sẽ hoạt động, với các tiền tố của nhà cung cấp, trên Chrome, Firefox, Opera, Safari và IE9 +.

Các câu trả lời khác được sử dụng: trước đó để ngăn chặn nó lật nội dung bên trong. Tôi đã sử dụng điều này trên chân trang của mình (để phản chiếu theo chiều dọc hình ảnh từ tiêu đề của tôi):

HTML:

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

CSS:

footer {
background:url(/img/headerbg.png) repeat-x 0 0;

/* flip background vertically */
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

/* undo the vertical flip for all child elements */
footer * {
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

Vì vậy, cuối cùng bạn lật phần tử và sau đó lật lại tất cả các phần tử con của nó. Hoạt động với các yếu tố lồng nhau, quá.

Đối với những gì nó có giá trị, đối với các trình duyệt dựa trên Gecko, bạn không thể loại bỏ điều này :visiteddo rò rỉ quyền riêng tư. Xem http://hacks.mozilla.org/2010/03/privacy-related-changes-asing-to-css-vistited/

Bạn có thể lật cả dọc và ngang cùng một lúc

    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);

Và với thuộc tính chuyển đổi, bạn có thể có được một cú lật tuyệt vời

    -webkit-transition: transform .4s ease-out 0ms;
    -moz-transition: transform .4s ease-out 0ms;
    -o-transition: transform .4s ease-out 0ms;
    transition: transform .4s ease-out 0ms;
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: ease-out;
    transition-delay: 0ms;

Trên thực tế, nó lật ngược toàn bộ yếu tố, không chỉbackground-image

SNIPPET

function flip(){
	var myDiv = document.getElementById('myDiv');
	if (myDiv.className == 'myFlipedDiv'){
		myDiv.className = '';
	}else{
		myDiv.className = 'myFlipedDiv';
	}
}

#myDiv{
  display:inline-block;
  width:200px;
  height:20px;
  padding:90px;
  background-color:red;
  text-align:center;
  -webkit-transition:transform .4s ease-out 0ms;
  -moz-transition:transform .4s ease-out 0ms;
  -o-transition:transform .4s ease-out 0ms;
  transition:transform .4s ease-out 0ms;
  transition-property:transform;
  transition-duration:.4s;
  transition-timing-function:ease-out;
  transition-delay:0ms;
}
.myFlipedDiv{
  -moz-transform:scaleX(-1) scaleY(-1);
  -o-transform:scaleX(-1) scaleY(-1);
  -webkit-transform:scaleX(-1) scaleY(-1);
  transform:scaleX(-1) scaleY(-1);
}

<div id="myDiv">Some content here</div>

<button onclick="flip()">Click to flip</button>