为了账号安全,请及时绑定邮箱和手机立即绑定

3D翻转还是有些不懂

正反两面到底是怎么做到的?如果说backface-visibility:hidden将反面隐藏,那么.photo_back .photo-wrap翻转180度,不就是反面,为什么反面还是能看到?

正在回答

3 回答

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

0 回复 有任何疑惑可以回复我~

基本思路是这样的:

(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 回复 有任何疑惑可以回复我~
  1. 正反两面的思路是:外框中有A、B两面。A面,沿中线旋转0度(也就是没有动);B面,沿中旋转180度,A面在上。此时旋转外框(切换 0,180)即可实现正反面。

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

0 回复 有任何疑惑可以回复我~
#1

arlenhui

z-index需要调整吗?我理解的是3d模式下设置A,B正反面,-webkit-backface-visibility:hidden;把反面隐藏。每次需要背面的时候把整个外框旋转180度,这样的话A变成反面被隐藏,B出现
2015-05-08 回复 有任何疑惑可以回复我~
#2

ffg_疯疯过 提问者 回复 arlenhui

那怎么知道外框的A面对应哪个div,B面又对应哪个div
2015-05-10 回复 有任何疑惑可以回复我~
#3

ffg_疯疯过 提问者

这个A、B面怎么确定?就是怎么把一个div变成一个物体的A面,又把另外一个div变成一个物体的B面
2015-05-10 回复 有任何疑惑可以回复我~
#4

arlenhui 回复 ffg_疯疯过 提问者

A,B面取决于你在onload时把哪个旋转了180度哪个没有旋转180度。-webkit-backface-visibility:hidden;旋转180度不可见。在点击翻转的时候再翻转过来就好了
2015-05-11 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消

3D翻转还是有些不懂

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信