3回答

• 

  qq_幻梦如世丶愿求一心誓言_0

  2015-05-25 19:10:53

  可是backface-visibility: hidden没有出现隐藏的效果啊

  0 0
• 

  fighter_fighting

  2015-05-25 10:54:44

  基本思路是这样的：

  （1）side_back和side_front两个div通过绝对定位实现重叠，此时前后均呈正像可见，side_back在上，side_front在下，由于遮挡只能看见side_back。

  （2）side_front旋转0度，side_back旋转180度，此时side_back在上呈倒像不可见，side_front在下呈正像可见。

  （3）side_back和side_front两个div被photo_warp包裹，在之前变换的基础之上，若添加.photo_back .photo_warp样式即side_back和side_front都被旋转180度，此时side_front在上呈倒像不可见，side_back在下呈正像可见，若添加.photo_front .photo_warp样式即side_back和side_front都被旋转0度，此时side_back在上呈倒像不可见，side_front在下呈正像可见。

  注意：

  每个div都有自己的正面和反面，当正面在上时可见反面在下是不可见，通过属性backface-visibility: hidden;控制实现；

  photo_warp包裹side_front和side_back，对两个div同时做翻转，而且要在其之前所做的3D翻转的基础之上再翻转，通过属性transform-style: preserve-3d;控制。

  0 1
• 

  Lyn_Tech

  2015-05-04 17:52:13

  1. 正反两面的思路是：外框中有A、B两面。A面，沿中线旋转0度（也就是没有动）；B面，沿中旋转180度，A面在上。此时旋转外框（切换 0,180）即可实现正反面。

  2. 很好的思路。如果A、B两面均是不透明的，那么在切换正反面的时候，只要调整z-index即可，不需要backface-visibility:hidden

  4 0

  arlenh... 回复ffg_疯疯...

  A,B面取决于你在onload时把哪个旋转了180度哪个没有旋转180度。-webkit-backface-visibility:hidden;旋转180度不可见。在点击翻转的时候再翻转过来就好了

  2015-05-11 00:01:12

  共 4 条回复 >