如何使用CSS3轉換來啓用嵌入塊元素的對角線移動？

Question

我有一個特別的問題，我想用CSS3過渡來解決。所以我有一個帶內聯塊元素的容器，一旦我選擇其中一個元素，其他所有元素都將被隱藏，並且所選元素應平滑移動到容器的左上角。

例如，我有容器如下面含有包裹在2行8個元素：

= = = = =
ABCD
EFGH
= = = = =

現在我選擇G，其他一切都隱藏和G移動到左上角：

= = = = =
摹
我目前的做法是將G的所有兄弟的寬度和高度設置爲0，CSS3過渡完美，我可以看到G平穩地移動到左邊緣。然而，因爲G在第二行，所以當第一行的所有內容都縮小時，它會跳起一條線。這種運動突然而且不受歡迎。我希望效果像G一樣順暢地向左上角移動。

我也看了翻譯（x，y），但它也不好，因爲我不想計算有多少像素必須將框移動到左上角。如果我可以利用（位置：絕對;左：0;頂：0）自動位於左上角，那麼這將是理想的，但只要我將位置設置爲絕對，元素將立即跳躍。

任何CSS3大師都可以提供一個很好的方法嗎？

Answer 1

不是完美的，但這裏是我的解決方案：

這是HTML：

<div class="base"> 
<div class="container"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child2"></div><div class="child"></div> 

由於您使用內聯塊，我想你的div很好地COLAPSE ，我需要在它們之間沒有空格。

而CSS是：

.container, .base { 
    width: 500px; 
    height: 400px; 
} 

.base { 
    border: solid 1px black; 
} 
.container { 
    -webkit-transition: 1s all linear; 
} 
.child, .child2 { 
    width: 120px; 
    height: 80px; 
    display: inline-block; 
    margin: 10px; 
} 
.child { 
    -webkit-transition-duration: 1s; 
    -webkit-transition-property: height, width, margin; 
    -webkit-transition-timing-function: linear; 
    background-color: lightblue; 
} 
.child2 { 
    -webkit-transition: 1s all linear; 
    background-color: lightgreen; 
} 
.base:hover .container { 
    width: 20px; 
} 
.base:hover .child { 
    width: 5px; 
    height: 0px; 
    margin: 0px; 
    background-color: silver; 
} 
.base:hover .child2 { 
    margin-right: -120px; 
} 

的想法是讓你的容器和孩子之間的一個額外的div，即在調整差不多的步伐孩子們。這樣，我們爲所有轉換保持相同的佈局，在這種情況下，每行3個div，並且我們避免所有元素進入同一行，並且忽略可見div的頂部。

當容器小於不縮小的div時，這種方法存在問題;爲了避免它，我們將visible元素的margin-right設置爲一個負值，以便它能很好地適應容器。

我在最後的狀態有問題，行之間有一個空格（並且元素沒有到達最上面的位置）。當我在小提琴外面有相同的代碼時，這個問題不顯示;我不知道是什麼原因造成的。

demo