即使设置了变换原点也不起作用 - CSS

Question

我正在运行一个CSS过渡到扩展框，我希望从中间出现比例，但是当设置变换原点时，没有任何事情发生。转换始终从左上角开始。我尝试过设置％，pxs，em，rems，并且chrome，firefox或IE都没有任何变化。

示例现场直播 - http://codepen.io/Vince_Brown/pen/emJoga?editors=010

并且您可以通过单击任何添加资源图标来触发我所指的转换。

HTML

<li class="resource--add">
    <h1 class="resource--add__title">Add Article</h1>
      <div class="resource__add-icon">
      <svg class="add" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
        <circle cx="30" cy="30" r="30" />
        <polygon fill="#FFFFFF" points="44.677,27.404 44.677,33.404 32.677,33.404 32.677,45.404 26.677,45.404 26.677,33.404 14.677,33.404 14.677,27.404 26.677,27.404 26.677,15.404 32.677,15.404 32.677,27.404 "/>
      </svg>

    </div>
      <p class="resource--add__summary">C'Mon and contribute you know you want to</p>
       <div class="resource--add__card"></div>
    </li>

CSS（SCSS）

.resource--add{
  @extend %resource;
  svg {
    cursor:pointer;
  }
  // .resource--add__title
  @include e('title') {
    @extend .resource__title;
    text-align: center;
  }
  // .resource--add__summary
  @include e('summary') {
    @extend .resource__summary;
    text-align: center;
  }
  // .resource--add__card
  @include e('card') {
    width: 0;
    height: 0;
    opacity:0;
    position: absolute;
    top:-100px;
    background-color: white;
    border-radius:5px;
    box-shadow:6px 6px 12px rgba(palette(gray,light),.4),-6px -6px 12px rgba(palette(gray,light),.4);
    transition: all .2s cubic-bezier(.4,0,.2,1);
    transform-origin: bottom,center;
  }

}
.card-is-active{
  width: 80%;
  height: 200px;
  opacity:1;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  transform-origin: bottom,center;
}

JS

$('.resource__add-icon').on("click",function(){
  $(this).toggleClass('icon-is-rotated');
  $(this).siblings('.resource--add__card').toggleClass('card-is-active');
});

提前致谢帮助

干杯。