图片翻转效果

来源:2-3 3D效果编写

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


    appren...

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

    2015-05-25 13:31:14

    共 1 条回复 >

  • fighter_fighting
    2015-05-25 10:35:36

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

    HeyLyi... 回复qq_幻梦如...

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

    2015-09-18 16:40:42

    共 2 条回复 >

  • 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旋转了

    appren...

    我试了下还是不对。

    2015-05-14 13:46:39

    共 1 条回复 >

CSS3+JS 实现超炫的散列画廊特效

实现更自由的切换照片的画廊效果,打造超酷的切换动画

46090 学习 · 215 问题

查看课程

相似问题