图片翻转效果
apprentice1104
2015-05-13 02:53
看了这个教程，但是翻转这部分真的好难理解呀，自己按照代码写了一下，不知道为什么照片正面中的标题文字显示的是180翻转后的效果。但是我的代码是这样的
.photo-wrap{
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style:preserved-3d;
}
.photo-wrap .side-front{
-webkit-transform:rotateY(0deg);
}
.photo .side-back{
-webkit-transform:rotateY(180deg);
}
.photo-wrap .side{
-wekit-backface-visibility:hidden;
}
.photo_front .photo-wrap{
-webkit-transform:rotateY(0deg);
}
.photo_back .photo-wrap{
-webkit-transform:rotateY(180deg);
}如果能把源码展示一下就好了，哪位如果知道能给讲解一下吗？谢谢
4回答
-
- fighter_fighting
- 2015-05-25 10:55:47
思路：
（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;控制。
-
- fighter_fighting
- 2015-05-25 10:35:36
希望对你有帮助，学习一下每个属性设置的功能是什么应该会更好理解
-
- fighter_fighting
- 2015-05-25 10:32:58
/* .warp{perspective:800px;-webkit-perspective:800px;} *//*元素距离试图的距离*//*删除无影响*/
.photo .photo_warp{transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transition: all 1s;-webkit-transition: all 1s;}/* 子元素保留其3D位置 *//*过渡*/
.photo .side{backface-visibility: hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;}/*当元素不面向屏幕时隐藏*/
/*反面在上旋转180度呈现倒像不可见，正面在下旋转0度呈现正像可见*/
.photo .side_front{transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
.photo .side_back{transform: rotateY(180deg);-webkit-transform: rotateY(180deg);}
/*在正、反面已做3D动作基础之上再做变换*/
/* photo_front：整体旋转0度，反面在上呈现倒像不可见，正面在下呈现正像且可见 */
.photo_front .photo_warp{transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
/* photo_back：整体旋转180度，反面在下呈现正像可见，正面在上呈现倒像不可见 */
.photo_back .photo_warp{transform: rotateY(180deg);-webkit-transform: rotateY(180deg);}
-
- 逯子洋
- 2015-05-14 01:17:17
.photo .side-back{
-webkit-transform:rotateY(180deg);
是这个的原因吧 photo div旋转了
CSS3+JS 实现超炫的散列画廊特效
46091 学习 · 215 问题
相似问题