CSS：絶対的な（？）位置ずれの要素（JSはありません）

Question

斜めに配置された要素の絶対位置は、左下隅がコンテナの境界線に近づくようにすることはできますか？

#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>

私はそれをゆがめる前に、長方形側の赤い線の位置をマークしました。私は矩形を配置する方法を探しているので、左下隅が赤い線に触れ、JSは許されません。 私は単純に 'left：Ypx'を使用することはできません。なぜなら、全体がキーフレームアニメーション（スキューの変更、外部要素の回転X +一定のパースペクティブの変更）になるからです。

それ以外の場合、アニメーションを作成する別の方法を提案することもできます。写真はゆっくりとレイジング・オン・ザ・テーブルのポジションから立ち上がっていますか？

編集： CODEPEN

Answer 1

あなたはtransform-origin Propertyを使用することができます。 あなたの場合、<div id="marker">を<div id="rect">に入れ、変換元を0% 100%に変更します。私の例で

ルック：

#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>

そしてこのWorking Fiddle