Как разрешить проблему с свойством transform?

Question

[sergey]

Есть блок, наклонный

background-color: $stack-color;
  width: 102px;
  height: 53px;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
  position: relative;

в нем иконка, которую центрирую с помощью свойства transform

position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

и теперь мне еще нужно обратное выравнивание добавить для иконки

-webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -o-transform: skewX(20deg);
  transform: skewX(20deg);

так вот для иконки происходит дубляж свойств transform, и соответственно выравнивание не срабатывает. Как здесь лучше поступить?

jsfiddle

P.S. выравнивание нужно делать только таким свойством (внутренние требования компании)

Answer 1

[HamSter]

transform: skewX(20deg) translate(-50%, -50%);

Несколько правил трансформации пишутся вместе в одном transform: ... skew() rotate() translate() .... ;

А у вас в разных и поэтому transform: skewX(20deg); перебивает transform: translate(-50%, -50%);

*если я правильно поняла вопрос )

Comments

[sergey]

cпс, делал также но че то не применилось, попробовал еще раз и все ок.