CSS中的開門3D效果

我想在CSS中創建「開門」3D效果，但我無法做到。問題是使用rotateY（）函數會使元素旋轉。你可以在這裏檢查http://jsfiddle.net/uC4du/1/CSS中的開門3D效果

你知道如何改變rotateY「參考軸」嗎？我應該怎麼做才能使元素左轉角作爲參考？

2012-01-13 Eduardo Cobuci

一種選擇是使父對象寬一倍，一半是空白的。然後，當它在中心軸上翻轉時，可見部分看起來像是一扇門。 – 2012-01-13 15:35:23

@DA是的，我做了，但它會使一切變得更加困難:( – 2012-01-13 15:36:45

檢查了這將有幫助http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image- transitions/tympanus.net/Development/ImageTransitions/index2.html – 2012-01-13 15:46:56

您可以使用'transform-origin'屬性（http://www.w3schools.com/cssref/css3_pr_transform-origin.asp）。

將其設置爲：「-webkit-transform-origin：0％50％;」

下面是一個使用該屬性的例子：http://jsfiddle.net/aV76H/

希望它能幫助！

來源

2012-01-13 16:34:54

一個小小的更新，以得到我的意思是：http://jsfiddle.net/aV76H/2054/ 原始版本頂部有一個奇怪的效果，這是一個對稱版本 – 2015-10-21 17:57:22

這是一個非常有用的答案，但任何人都可以指出我在正確的方向來修改這個工作在Firefox？ – Ryan 2017-06-29 20:30:04

CSS中的開門3D效果

回答

相關問題