个回答

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

  2015-05-25 19:10:53

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

  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;控制。

  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

  0