在Chrome中，我試圖旋轉立方體，但在此之後，邊突然不是棘手的，父元素似乎優先。但是，當我製作該元素pointer-events: none時，body標記是第一個元素，因此在旋轉90deg之後由於某種原因它失去了它的交互。CSS 3D立方體旋轉到一邊時，旋轉90度時，錯誤地在表面上方的父元素，但不是當89.9deg

然而，當我只有旋轉它89.9deg，沒有任何問題，我可以與側面的元素進行交互，我試着用translateZ擺弄，但它不能幫助。

我在這裏重現它： http://jsfiddle.net/TrySpace/GxJLV/

而，在Firefox它工作正常...

任何人都熟悉這個bug /區別，以及如何解決它？

- 看來，我正在旋轉的容器元素失去了它的所有交互作用，因爲那個容器元素是檢查器中的一個平面，它保存着三維元素，因此在從一側看的平面上沒有交互？

更新：http://jsfiddle.net/TrySpace/GxJLV/2/（89.9°仍然工程...）

來源

2014-07-08 TrySpace

這似乎是一個Chrome的錯誤，我多次遇到它與3D。沒有其他方法比如'89.9deg'或'pointer-event：none;'等黑客。同樣的問題在這裏：http://stackoverflow.com/questions/16982499/css-flip-transition-between-two-divs和這裏：http://stackoverflow.com/questions/18484875/css3-rotate3d-cross-browser-問題 –

什麼@AurélienGrimpard說的是真的。這是一個渲染錯誤，沒有什麼可說的 –

另外，你的演示中有很多不必要的CSS。這使得很難看到究竟應用了什麼 –

你得到的舍入誤差和Chrome的處理命中測試的（至少有http://crbug.com/126479的組合命中 - 這個bug沒有關閉，最近登陸補丁沒有解決你的情況AFAICT）。

以供參考，在這裏是有額外的HTML和CSS的小提琴取出的簡化版本：http://jsfiddle.net/GxJLV/7/

修復，替代1

您指定

.show-right { 
    -webkit-transform: rotate3d(0, 1, 0, -90deg); 
    ... 
}

，但如果你檢查計算在開發人員工具中你會發現它是becoms

-webkit-transform: matrix3d(0.00000000000000006123233995736766, 0, 1, 0, 
          0, 1, 0, 0, -1, 
          0, 0.00000000000000006123233995736766, 0, 0, 0, 0, 1);

這會導致旋轉的div和按鈕以3d z順序位於主體下方。如果更換rotate3d與

.show-right { 
    -webkit-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1); 
    ... 
}

命中測試就可以了（見http://jsfiddle.net/GxJLV/3/對原，http://jsfiddle.net/GxJLV/10/對簡化版本）。

修復，替代2

（爲什麼這個工程是我也不清楚，但other people are doing it as well。）

上旋轉元素的父集(-webkit-)perspective：

.view { 
    -webkit-perspective: 100000px; 
}

http://jsfiddle.net/GxJLV/4/參見（原始，http://jsfiddle.net/GxJLV/8/簡化）

這將導致在按鈕一些閃爍雖然。

來源

2014-07-13 16:15:28 mikaraento

雖然它最終仍然是一個錯誤，爲你的努力+500，謝謝！對不起，這個雜亂的小提琴，但我一直在研究它至少一個小時，當我決定檢查另一個瀏覽器時...... – TrySpace

CSS 3D立方體旋轉到一邊時，旋轉90度時，錯誤地在表面上方的父元素，但不是當89.9deg

回答

修復，替代1

修復，替代2

相關問題