                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS3+JS 实现超炫的散列画廊特效

图片翻转效果

看了这个教程，但是翻转这部分真的好难理解呀，自己按照代码写了一下，不知道为什么照片正面中的标题文字显示的是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);
}

如果能把源码展示一下就好了，哪位如果知道能给讲解一下吗？谢谢

apprentice1104

2015-05-13

源自：CSS3+JS 实现超炫的散列画廊特效 2-3

关注问题我要回答

1243

操作

收起

4 回答

fighter_fighting
2015-05-25

思路：

（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 回复有任何疑惑可以回复我~

收起回答

apprentice1104 提问者

谢谢你的认真解答，我好好学习一下。

2015-05-25 回复有任何疑惑可以回复我~

fighter_fighting
2015-05-25

希望对你有帮助，学习一下每个属性设置的功能是什么应该会更好理解

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

收起回答

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

我的两次翻转都能看到，但是不论怎么翻转back总是将front面挡住，也就是说它并没有隐藏是为什么？

2015-05-25 回复有任何疑惑可以回复我~

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

我也遇到这个问题，想请问你解决了吗？:(

2015-09-18 回复有任何疑惑可以回复我~

fighter_fighting
2015-05-25

/* .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);}

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

收起回答