如何旋轉子元素，如果其父元素被旋轉？

目標是讓子元素通過其父元素進行旋轉，但是一旦您單擊了子元素，它就會動起來，如果沒有應用於父元素的旋轉將會如何。所以基本上我只是試圖從父元素的旋轉關閉。如何旋轉子元素，如果其父元素被旋轉？

WIN - rotateZ(ndeg) on the parent and rotateZ(-ndeg) on the child 
FAIL - rotateXY(ndeg) on the parent and rotateXY(-ndeg) on the child

enter image description here

fiddle

來源

2013-03-06 user1873073

要理解，旋轉的div的孩子正在他們的轉型，從他們的父母點，所以從rotateX（50）孩子做一個rotateX（ - 50）從「0」，但它不是「0」persay，這不會給你你所期望的。

你需要做的是將所有東西都包裹起來，並分開處理，以便「父母」實際上不影響孩子。然後你可以正確地反轉它。

http://jsfiddle.net/arGWr/1/

<div class="wrapper"> 
    <div class="outerX"></div> 
    <div class="inner1X"></div> 
    <div class="inner2X"></div> 
</div>

編輯：更好地解釋，在原有的解決方案，你有一個正方形。它變成了一個矩形，現在當你做一個旋轉的時候 - 它是在矩形上做的，在旋轉上混合。它不知道你正試圖扭轉以前的轉型。

來源

2013-03-06 05:16:01

這確實讓不旋轉的子元素，但現在它不會被父元素的所有旋轉。即時通訊嘗試讓它由父母旋轉，但當你點擊孩子時，它會旋轉回到父母沒有旋轉的位置。我修改你的小提琴來說明。孩子應該和父母一起搬家。 http://jsfiddle.net/arGWr/2/ – user1873073 2013-03-06 14:22:21

請忽略我最後的評論。這就是我的意思 - 外部元素是包裝。即時通訊試圖弄清楚如何旋轉外部元素，並讓子元素與它一起旋轉，但是當你點擊其中一個子元素時，它將動畫到如果沒有對父元素執行旋轉操作的位置。 – user1873073 2013-03-06 14:29:03

所以你不知道如何做點擊事件？ – 2013-03-06 19:46:18

你可以嘗試添加該父

-webkit-transform-style: preserve-3d;

參考：http://www.webkit.org/blog-files/3d-transforms/transform-style.html

來源

2013-03-29 13:38:00 Max

如何旋轉子元素，如果其父元素被旋轉？

回答

相關問題