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