3D翻转还是有些不懂
正反两面到底是怎么做到的?如果说backface-visibility:hidden将反面隐藏,那么.photo_back .photo-wrap翻转180度,不就是反面,为什么反面还是能看到?
正反两面到底是怎么做到的?如果说backface-visibility:hidden将反面隐藏,那么.photo_back .photo-wrap翻转180度,不就是反面,为什么反面还是能看到?
2015-04-30
基本思路是这样的:
(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;控制。
举报