Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Vince Brown
Vince Brown
16,249 Points

Trasform-Origin Not working, Only transforms from top left.

I am running a CSS transition to scale out box and I want to the scale to happen from the middle out but when setting the transform-origin nothing is happening. The transition always occurs from the top left. I have tried setting it in %'s, pxs , em, rems, and nothing no changes in chrome,firefox or IE.

The example is live here - http://codepen.io/Vince_Brown/pen/emJoga?editors=010

and you can trigger the transition I am referring to by clicking any of the add resource icons.

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;
}

Jquery

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

Any help is greatly appreciated.

Cheers