使用CSS translateY（）

我使用CSS關鍵幀將一些元素從（瀏覽器高度+元素高度）px移動到瀏覽器頂部的-50px處，這很有效，但問題在於它滯後，我很好意識到使用translateY可以解決這個問題。使用CSS translateY（）

現在假設我有一個CSS如下。

.bubble 
{ 
    -webkit-transition: -webkit-transform 1s ease-in-out; 
} 

.bubble.move 
{ 
    -webkit-transform: translateY(-50px); 
}

由於該元素是瀏覽器屏幕（瀏覽器高度+元素高）像素的下方，我希望它在屏幕頂部的-50px移動，這是行不通的。它只是將元素從當前位置移動到當前位置的-50px，這不是預期的。我怎麼能要求轉換到-50px的瀏覽器，而不是他的元素？

-2

使用javascript來計算它，並設置CSS使用JavaScript太

2011-10-02 13:43:48 cmplieger

這是選項，但我有一個印象，CSS可以做到這一點 – Neutralizer

前段時間我問過同樣的問題，你只能移動一個元素x個像素。你不能告訴它去特定的座標。（這真的很可惜）。所以現在，直到css4發佈，你必須使用javascript :)。 – cmplieger

還有一件事，translateY（）和translate3d（）有區別嗎？如果使用後者，我們如何要求它忽略Y的工作X和Z值？ – Neutralizer

-1

您是否試過將元素絕對而非相對地定位？

2011-10-02 13:06:48 Sneakyness

是從來沒有嘗試過的相對位置，它只是絕對從開始 – Neutralizer

翻譯不是你要找的。您想要絕對定位元素並將過渡置於頂層屬性上。喜歡的東西：

.bubble { 
    position:absolute; 
    top:100%; 
    transition:top 1s ease-in-out; 
} 
.bubble.move { 
    top:50px; 
}

對這種做法只有壞的部分，該機構將需要是.bubble的相對父。因爲我討厭他們，所以我放棄了供應商前綴。

2012-08-23 13:38:41

回答