Un effet sympa en CSS

Tiens, j'ai trouvé un effet sympa en css sur ce site, je l'ai récupéré et mis là... (je sais pas si j'ai tellement le droit, mais bon )

<style type="text/css">
div.tr1 img {
    -webkit-transform: translateX(60px) translateY(-160px) rotateX(45deg) rotateZ(-20deg);
    -moz-transform: translateX(60px) translateY(-160px) rotateX(45deg) rotateZ(-20deg);
    -ms-transform: translateX(60px) translateY(-160px) rotateX(45deg) rotateZ(-20deg);
    -o-transform: translateX(60px) translateY(-160px) rotateX(45deg) rotateZ(-20deg);
    -webkit-transition: transform 1s;
  transition: transform 1s;
}       
div.tr1 img:hover{
    -webkit-transform: translateX(0) translateY(0) rotateX(0) rotateZ(0);
    -moz-transform: translateX(0) translateY(0) rotateX(0) rotateZ(0);
    -ms-transform: translateX(0) translateY(0) rotateX(0) rotateZ(0);
    -o-transform: translateX(0) translateY(0) rotateX(0) rotateZ(0);
    -webkit-transition: transform 1s;
  transition: transform 1s;
}
div.tr1{
    width:512px;
    height:256px;
    overflow:hidden;
    border-radius:5px;
    border:1px solid rgba(0,0,0,0.2);
    background:black;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

</style>
<div class="tr1">
    <img src="https://www.pdfannotator.com/images/pdfannotator/fr/screenshot.png">
</div>

Animating CSS Width and Height Without the Squish Effect • PQINA

Animer width et height en css sans se prendre la tête et plus rapidement avec transform.

Les animations de propriétés provoquent un reflow de la page alors que transform et opacity ne le font pas: c'est un point en leur faveur. Problème, si on étire une boîte arrondie (transform: scale), les coins se déforment alors que si on change la taille (width/height), les coins restent arrondis.

L'auteur propose une solution qui consiste à étirer tout sauf les coins en divisant l'élément en plusieurs divs... ça me rappelle l'époque où border-radius n'existait pas et qu'on faisait les coins arrondis en multipliant les divs avec des fonds... #teamVieux



Fil RSS des articles