Découper un élément parent vers un élément parent avec un rayon de bordure

Question

Comment forcer le découpage d'un enfant en un élément parent dont les coins sont arrondis. Lors de l'animation de l'enfant, il ignore le rayon frontière de l'élément parent. Y at-il un moyen de fixer les deux coins sur le dessus?

.item{ 
    text-align: center; 
    cursor: pointer; 
    overflow: hidden; 
    height: 280px; 
    width: 280px; 
    float: left; 
    border-radius: 5px; 
    background: white; 
    margin: 10px; 
    position: absolute; 
} 
.top{ 
    z-index: 1; 
    position: absolute; 
    height: 280px; 
    width: 280px; 
    background: #ed844b; 
    transition: 0.3s; 
    border-radius: 5px; 
} 
.behind{ 
    z-index: 0; 
    position: absolute; 
    width: 100%; 
    top: 136px; 
    height: 138px; 
    padding: 10px 16px; 
    background: #DDDDDD; 
    box-sizing: border-box; 
    border-radius: 5px; 
} 
.slide-up{ 
    transform: translate3d(0, -136px, 0); 
    border-radius: 0px; 
} 

Voici une petite démo: http://codepen.io/Koopa/pen/xbaMez

Merci

Koopa

Answer 1

Lorsque vous ajoutez un autocommutateur de transformation 3D à l'enfant, vous déplacer un peu à la couche GPU séparée. Vous pouvez déplacer l'élément parent vers la couche GPU au lieu d'ajouter le hack null-transformer à .item. Ou vous pouvez remplacer translate par translateY (dans ce cas, l'enfant est tronqué uniquement s'il n'est pas animé).