BoxPistols
1/19/2019 - 8:54 AM

transform skew mask animation

transform skew mask animation

<div id="js-object" class="object">
    <img src="https://82mou.github.io/image/hatsushi_mask.png" alt="">
</div>

<ul class="nav">
  <li>
    <div class="square js-transform" data-object-class="is-square">
      <span class="text">square</span>
    </div>
  </li>
  <li>
    <div class="circle js-transform" data-object-class="is-circle">
      <span class="text">circle</span>
    </div>
  </li>
  <li>
    <div class="parallelogram js-transform" data-object-class="is-parallelogram">
      <span class="text">parallelogram</span>
    </div>
  </li>
</ul>
const $object = $('#js-object'),
      $transform = $('.js-transform');

$transform.on('click', (e) => {
  $object.removeClass((index, className) => {
   return (className.match(/\bis-\S+/g) || []).join(' ')
  });
  $object.addClass($(e.currentTarget).data('object-class'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
li {
  list-style: none;
}

.object {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 30px auto 0;
  overflow: hidden;
  will-change: transform;
  transition: all 0.6s;
  &.is-square {
    width: 300px;
    height: 300px;
    border-radius: 0;
    transform: skew(0deg);
    img {
      transform: translate(-50%, -50%) skew(0deg);
    }
  }
  &.is-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    transform: skew(0deg);
    img {
      will-change: transform;
      transform: translate(-50%, -50%) skew(0deg);
    }
  }
  &.is-parallelogram {
    border-radius: 0;
    transform: skew(-20deg);
    img {
      transform: translate(-50%, -50%) skew(20deg);
    }
  }
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    transform: translate(-50%, -50%) skew(0deg);
    transition: all 0.6s;
  }
}
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  li {
    padding: 0 30px;
    .square {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: #8FD5DF;
    }
    .circle {
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #F2CEE9;
    }
    .parallelogram {
      position: relative;
      width: 100px;
      height: 100px;
      margin: 0 20px;
      transform: skew(-30deg);
      background-color: #FBF9EC;
      .text {
        transform: translate(-50%, -50%) skew(30deg);
      }
    }
  }
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}