3D翻轉(zhuǎn)還是有些不懂
正反兩面到底是怎么做到的？如果說backface-visibility:hidden將反面隱藏，那么.photo_back .photo-wrap翻轉(zhuǎn)180度，不就是反面，為什么反面還是能看到？
ffg_瘋瘋過
2015-04-30
3 回答
舉報
0/150
提交
取消
2015-05-25
可是backface-visibility: hidden沒有出現(xiàn)隱藏的效果啊
2015-05-25
基本思路是這樣的：
（1）side_back和side_front兩個div通過絕對定位實現(xiàn)重疊，此時前后均呈正像可見，side_back在上，side_front在下，由于遮擋只能看見side_back。
（2）side_front旋轉(zhuǎn)0度，side_back旋轉(zhuǎn)180度，此時side_back在上呈倒像不可見，side_front在下呈正像可見。
（3）side_back和side_front兩個div被photo_warp包裹，在之前變換的基礎(chǔ)之上，若添加.photo_back .photo_warp樣式即side_back和side_front都被旋轉(zhuǎn)180度，此時side_front在上呈倒像不可見，side_back在下呈正像可見，若添加.photo_front .photo_warp樣式即side_back和side_front都被旋轉(zhuǎn)0度，此時side_back在上呈倒像不可見，side_front在下呈正像可見。
注意：
每個div都有自己的正面和反面，當正面在上時可見反面在下是不可見，通過屬性backface-visibility: hidden;控制實現(xiàn)；
photo_warp包裹side_front和side_back，對兩個div同時做翻轉(zhuǎn)，而且要在其之前所做的3D翻轉(zhuǎn)的基礎(chǔ)之上再翻轉(zhuǎn)，通過屬性transform-style: preserve-3d;控制。
2015-05-04
正反兩面的思路是：外框中有A、B兩面。A面，沿中線旋轉(zhuǎn)0度（也就是沒有動）；B面，沿中旋轉(zhuǎn)180度，A面在上。此時旋轉(zhuǎn)外框（切換 0,180）即可實現(xiàn)正反面。
很好的思路。如果A、B兩面均是不透明的，那么在切換正反面的時候，只要調(diào)整z-index即可，不需要backface-visibility:hidden