動畫的傾斜DIV無不希望的效果

Question

我想，以與平行四邊形容器的菜單和動畫他們CSS。這個想法是，當你懸停一個項目，平行四邊形改變它的高度，使視覺縮放效果。

到目前爲止，一切都很好，但問題是，當我改變懸停平行四邊形的高度，這也改變它的位置一點點的權利，我不知道爲什麼。

所以cuestion是：這是沒有辦法改變平行四邊形的高度保持它的位置？

這裏的不利影響我有：

.container { 
 
    float: left; 
 
    padding: 0 0.5rem; 
 
} 
 

 
.parallelogram { 
 
\t position: relative; 
 
\t width: 125px; 
 
\t height: 50px; 
 
\t -webkit-transform: skew(-30deg); 
 
\t -moz-transform: skew(-30deg); 
 
\t -o-transform: skew(-30deg); 
 
\t transform: skew(-30deg); 
 
    transition: all .4s linear; 
 
} 
 

 
.parallelogram:hover { 
 
\t height: 100px; 
 
}

<div class="container"> 
 
    <div class="parallelogram" style="background-color: red;"> 
 
    1 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="parallelogram" style="background-color: green;"> 
 
    2 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="parallelogram" style="background-color: blue;"> 
 
    3 
 
    </div> 
 
</div>

Answer 1

據我瞭解，你只需要改變transform-origin爲.parallelogram。

下面是更新的演示。

.container { 
 
    float: left; 
 
    padding: 0 0.5rem; 
 
} 
 
.parallelogram { 
 
    position: relative; 
 
    width: 125px; 
 
    height: 50px; 
 
    -webkit-transform: skew(-30deg); 
 
    -moz-transform: skew(-30deg); 
 
    -o-transform: skew(-30deg); 
 
    transform: skew(-30deg); 
 
    transition: all .4s linear; 
 
    transform-origin: top right; 
 
} 
 
.parallelogram:hover { 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="parallelogram" style="background-color: red;"> 
 
    1 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="parallelogram" style="background-color: green;"> 
 
    2 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="parallelogram" style="background-color: blue;"> 
 
    3 
 
    </div> 
 
</div>