                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1207

操作

收起

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

收起回答