CSS: Positionnement absolu (?) De l'élément incliné (pas de JS! Important)

Question

Est-il possible de positionner l'élément incliné de manière absolue de sorte que son coin inférieur gauche reste proche (0px) de la bordure du conteneur?

#one{ 
 
    position:absolute; 
 
    background-color:darkkhaki; 
 
    width:800px; 
 
    height:200px; 
 
    left:50%; 
 
    transform: translateX(-50%) 
 
} 
 

 
#rect{ 
 
    position:absolute; 
 
    background-color: salmon; 
 
    width:400px; 
 
    height:200px; 
 
    left:50%; 
 
    transform: translateX(-50%) skew(-25deg); 
 
} 
 

 
#marker{ 
 
    position:absolute; 
 
    background-color:red; 
 
    width:5px; 
 
    height:200px; 
 
    left: 200px; 
 
}

<div id="one"> 
 
    <div id="rect"></div> 
 
    <div id="marker"></div> 
 
    <div>

J'ai marqué avec la position de la ligne rouge du côté rectangle avant l'inclinant. Je cherche un moyen de positionner le rectangle, donc son coin inférieur gauche touche la ligne rouge et aucun JS autorisé. Je ne peux pas simplement utiliser 'left: Ypx', parce que le tout va être animé par des images-clés (changement d'inclinaison, rotationX + perspective constante sur l'élément externe). Sinon, peut-être pourriez-vous suggérer une autre façon de faire de l'animation: les images qui se lèvent lentement de la position de pose sur la table?

modifier: CODEPEN

Answer 1

Vous pouvez utiliser transform-origin Property. Pour le vôtre, je mets <div id="marker"> à l'intérieur <div id="rect"> et change l'origine de la transformation en 0% 100%.

Regardez mon exemple:

#one{ 
 
    position:absolute; 
 
    background-color:darkkhaki; 
 
    width:800px; 
 
    height:200px; 
 
    left:50%; 
 
    transform: translateX(-50%) 
 
} 
 

 
#rect{ 
 
    position:absolute; 
 
    background-color: salmon; 
 
    width:400px; 
 
    height:200px; 
 
    left:50%; 
 
    transform: translateX(-50%) skew(-25deg); 
 
} 
 

 
#marker{ 
 
    position:absolute; 
 
    background-color:red; 
 
    width:5px; 
 
    height:200px; 
 
    top: 0px; 
 
    left: 0px; 
 
    transform: skew(25deg); 
 
    -webkit-transform-origin: 0% 100%; 
 
    transform-origin: 0% 100%; 
 
}

<div id="one"> 
 
    <div id="rect"> 
 
    <div id="marker"></div> 
 
    </div> 
 
<div>

Et ce Working Fiddle