如何否定css中的移動

Question

我想知道如何計算或否定元素的移動，如果其父元素應用了轉換。

例如，我有具有以下標記的轉盤：

<ul class="carousel" style="position:relative;"> 
<li class="item active"> 
    text content 1. Will move with the slide. 
    <div class="fixed-content"> 
    I want to remain where I am and I have the exact same content as the fixed element below 
    </div> 
<li> 
<li class="item"> 
    text content 2. Will move with the slide. 
    <div class="fixed-content"> 
    I want to remain where I am and I have the exact same content as the fixed element above 
    </div> 
<li> 
</ul> 

在過渡期間

然後，當從項目到項目的有源開關，它增加了左/右，上/下一個類，這取決於下一個div將會活躍。然後刪除這些類。

如果它具有這些類，它將向.item元素應用css變換：translateX（-100％）[或transform：translateX（100％）]，它的過渡時間爲.6s， -out選項。

現在，我想使用CSS固定內容的動畫，使其看起來「靜態」或「固定」。我如何在動畫關鍵幀中編寫它？如果轉換時間已經改變，用什麼公式來計算？

PS。我知道，我可以重新安排這些元素，這樣我就可以在.items之外放置固定內容，併爲其指定一個位置：絕對屬性，但是我們假裝我無法做到這一點。 ;）

Answer 1

我不喜歡這個標記，它只是一個踢懸停效果（不carroussel），但我相信是這樣的。

http://codepen.io/joaosaro/pen/oLZmRr

<ul class="carousel" style="position:relative;"> 
    <div class="wrap"> 
    <li class="item one">text content 1. Will move with the slide.</li> 
    <li class="item two">text content 2. Will move with the slide.</li> 
    <div class="fixed-content">I want to remain where I am and I have the exact same content as the fixed element above</div> 
    </div> 
</ul> 


ul { 
    position: fixed; 
    margin: 50px auto; 
    width: 300px; 
    height: 300px; 
    cursor: pointer; 
} 
ul .wrap { 
    position: relative; 
    background: pink; 
    height: 100%; 
    width: 100%; 
    border: 2px solid black; 
    overflow: hidden; 
} 
ul .wrap li { 
    height: 100%; 
    width: 100%; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
} 
ul .wrap li.one { 
    background-color: yellow; 
} 
ul .wrap li.two { 
    background-color: red; 
} 
ul .wrap .fixed-content { 
    position: absolute; 
    z-index: 100; 
    bottom: 0; 
    background: blue; 
} 
ul:hover .wrap li { 
    -webkit-transform: translateY(-100%); 
      transform: translateY(-100%); 
}