如何在執行旋轉轉換時相對於父節點定位div？

這裏是我的問題如何在執行旋轉轉換時相對於父節點定位div？

Fiddle

我有4個格，是在position:absolute和他們的位置被定義取決於它們的ID。

當用戶點擊div時，div在旋轉和縮放時發生轉變。我的目標是將得到的div（黃色）放置在一個非常特別的地方：位於父節點的中心。

現在在我的Fiddle，它自己旋轉，這是不是我想要的。

我嘗試了其他事情;

添加到我的改造transform:translate(x,y)，但這是相對的被點擊之前的div，這意味着每一個DIV將轉化DIV發送到另一個位置。
加left:5%;top:5%;希望它能工作，但它的確不是。
添加transform-origin，但再次，它是相對於DIV本身，而不是家長或身體

我的問題：是否有可能與對於定義的過渡期間div的位置父節點而不是自己？

來源

2012-12-20 leMoisela

使用翻譯似乎工作：http://jsfiddle.net/8XKx3/ –

感謝您的幫助。當然，如果你硬編碼的答案，這將工作。我寧願尋找一個通用的答案（在這個例子中有4個div，但在我真正的webapp中，有幾十個......）。 thx無論如何 – leMoisela

您top和left覆蓋是不工作的原因是因爲ID選擇比類選擇器更具體，因此優先。您可以使用!important解決這個問題：

.isTurning{ 
    background-color:yellow; 
    z-index:1; 
    -webkit-transition: -webkit-transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out; 
    -webkit-transform: scale(2) rotateY(180deg); 
    left:27% !important; 
    top: 25% !important; 
}

或使用特異性：

#b_1.isTurning, #b_2.isTurning, #b_3.isTurning, #b_4.isTurning{ 
    background-color:yellow; 
    z-index:1; 
    -webkit-transition: -webkit-transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out; 
    -webkit-transform: scale(2) rotateY(180deg); 
    left:27%; 
    top: 25%; 
}

這裏是一個演示：http://jsfiddle.net/Fs6Zw/

來源

2012-12-20 09:57:53

，你也可以說'transition：width 0.3s'謝謝，這正是我所期待的。特別是在轉換中添加'left'和'top'非常聰明！ – leMoisela

@安迪這已經在我的答案。閱讀第二個片段。 –

我刪除了你不想要的翻轉效果。

我在父母上添加了position:relative。所以現在當你的孩子，他們是基於父母的位置。

我放在黃色方格在中心做這個：

top:50% !important; 
left:50% !important; 
margin-top: -75px; 
margin-left: -75px;

忘了包括鏈接：http://jsfiddle.net/hZfhQ/2/

來源

2012-12-20 09:55:10 wakooka

thx，這幾乎是我正在尋找;唯一剩下的問題是它首先向中間轉化，然後轉向。無論如何thx：+1 – leMoisela

哦！和'-webkit-transition：全部爲0.3s;'這非常酷！不知道'全部'的東西:) thx男人！ – leMoisela

不用擔心，你可以定義你想要動畫的屬性，如果你想動畫只有寬度 – wakooka

如何在執行旋轉轉換時相對於父節點定位div？

回答

相關問題