1

试图复制问题的答案： 在倾斜的类按钮中不倾斜文本

答案代码在：http: //jsbin.com/obusoy/6/edit

我的问题是我的解决方案必须在 IE8 中工作，所以我必须使用 -ms-filter 而不是 CSS3 中更友好的 skew 函数。

我从http://www.useragentman.com/IETransformsTranslator/获得了转换的值

我的 CSS 是：

.button-wrapper {
  background: #fff;
  border: 1px solid #bbb;
  border-color: #ddd #ccc #bbb;
  overflow: hidden;
  width:             120px;
  height:            40px;

  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8152074690959046, M12=-0.6840402866513375, M21=-3.885780586188048e-16, M22=1.0641777724759122, SizingMethod='auto expand')";
  margin-left: -6px;
  margin-top: -4px;

/*
FORMULA IN TRANSLATER: skew(-20deg) rotate(20deg)
EQUIVALENT OF:
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
*/

}

.button-wrapper:hover {
  background: #efe;
  border-color: #090;
}

.button-wrapper button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  padding: 4px 0;
  margin: 0;
  width: 100%;

  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8152074690959046, M12=0.6840402866513375, M21=-3.885780586188048e-16, M22=1.064177772475912, SizingMethod='auto expand')";

/*
FORMULA IN TRANSLATER: skew(20deg) rotate(-20deg)
EQUIVALENT OF:
  -webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -o-transform: skewX(20deg);
  transform: skewX(20deg);
*/    
}

.button-wrapper button:hover {
  color: #060;
}

我的 HTML 是：

<div class="button-wrapper">
  <button id="RefreshButton3" runat="server" ServerClick="RefreshButton_Click">Refresh</button>
</div>

我的问题是文本没有完全偏离原始数量（看起来水平压缩并且仍然略微斜体）。

使用什么正确的变换值？我错过了什么步骤？

更新：找到解决方案。 问题是操作的顺序问题。如果第一个变换是 skew() rotate()，那么第二个变换必须是 rotate() skew()。这在第二步中给出了一个稍微不同的矩阵：

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.064177772475912, M12=0.6840402866513375, M21=-3.885780586188048e-16, M22=0.8152074690959046,, SizingMethod='auto expand')";
4

1 回答 1

0

（按照评论中的建议作为单独的答案发布）

问题是操作的顺序问题。如果第一个变换是 skew() rotate()，那么第二个变换必须是 rotate() skew()。这在第二步中给出了一个稍微不同的矩阵：

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.064177772475912, M12=0.6840402866513375, M21=-3.885780586188048e-16, M22=0.8152074690959046,, SizingMethod='auto expand')";
于 2013-08-21T02:37:00.167 回答