html - 垂直翻转按钮背景图像

Question

我正在使用 CSS 来设置具有背景图像的按钮样式。我需要一个新闻效果。所以我尝试在按钮处于活动状态时垂直翻转按钮，如小提琴所示。

http://jsfiddle.net/krishnathota/xzBaZ/10/

我可以翻转图像，但可以翻转整个按钮。我怎样才能只翻转背景图像。??

我必须在另一个班级写作，.button:active或者什么？请帮助

请检查第三个和第四个按钮并翻转背景图像。第一个和第二个按钮包含一个<img>我不希望它被翻转。

如果不支持跨浏览器，您能告诉我如何在按钮处于活动状态时更改背景而不更改背景颜色吗？

Answer 1

active仅为图像添加状态

.button:active img{
    /*Vertical Flip background img*/
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv; /*IE*/
    top: 1px; position: relative;
    /*-webkit-transform: translateY(1px);-moz-transform: translateY(1px);*/
  } 

演示

这是分别翻转元素的最佳教程

http://www.sitepoint.com/css3-transform-b​​ackground-image/