圖片翻轉(zhuǎn)效果
看了這個(gè)教程，但是翻轉(zhuǎn)這部分真的好難理解呀，自己按照代碼寫(xiě)了一下，不知道為什么照片正面中的標(biāo)題文字顯示的是180翻轉(zhuǎn)后的效果。但是我的代碼是這樣的
.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);
}如果能把源碼展示一下就好了，哪位如果知道能給講解一下嗎？謝謝
2015-05-25
思路：
（1）side_back和side_front兩個(gè)div通過(guò)絕對(duì)定位實(shí)現(xiàn)重疊，此時(shí)前后均呈正像可見(jiàn)，side_back在上，side_front在下，由于遮擋只能看見(jiàn)side_back。
（2）side_front旋轉(zhuǎn)0度，side_back旋轉(zhuǎn)180度，此時(shí)side_back在上呈倒像不可見(jiàn)，side_front在下呈正像可見(jiàn)。
（3）side_back和side_front兩個(gè)div被photo_warp包裹，在之前變換的基礎(chǔ)之上，若添加.photo_back .photo_warp樣式即side_back和side_front都被旋轉(zhuǎn)180度，此時(shí)side_front在上呈倒像不可見(jiàn)，side_back在下呈正像可見(jiàn)，若添加.photo_front .photo_warp樣式即side_back和side_front都被旋轉(zhuǎn)0度，此時(shí)side_back在上呈倒像不可見(jiàn)，side_front在下呈正像可見(jiàn)。
注意：
每個(gè)div都有自己的正面和反面，當(dāng)正面在上時(shí)可見(jiàn)反面在下是不可見(jiàn)，通過(guò)屬性backface-visibility: hidden;控制實(shí)現(xiàn)；
photo_warp包裹side_front和side_back，對(duì)兩個(gè)div同時(shí)做翻轉(zhuǎn)，而且要在其之前所做的3D翻轉(zhuǎn)的基礎(chǔ)之上再翻轉(zhuǎn)，通過(guò)屬性transform-style: preserve-3d;控制。
2015-05-25
希望對(duì)你有幫助，學(xué)習(xí)一下每個(gè)屬性設(shè)置的功能是什么應(yīng)該會(huì)更好理解
2015-05-25
/* .warp{perspective:800px;-webkit-perspective:800px;} *//*元素距離試圖的距離*//*刪除無(wú)影響*/
.photo .photo_warp{transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transition: all 1s;-webkit-transition: all 1s;}/* 子元素保留其3D位置 *//*過(guò)渡*/
.photo .side{backface-visibility: hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;}/*當(dāng)元素不面向屏幕時(shí)隱藏*/
/*反面在上旋轉(zhuǎn)180度呈現(xiàn)倒像不可見(jiàn)，正面在下旋轉(zhuǎn)0度呈現(xiàn)正像可見(jiàn)*/
.photo .side_front{transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
.photo .side_back{transform: rotateY(180deg);-webkit-transform: rotateY(180deg);}
/*在正、反面已做3D動(dòng)作基礎(chǔ)之上再做變換*/
/* photo_front：整體旋轉(zhuǎn)0度，反面在上呈現(xiàn)倒像不可見(jiàn)，正面在下呈現(xiàn)正像且可見(jiàn) */
? .photo_front .photo_warp{transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
/* photo_back：整體旋轉(zhuǎn)180度，反面在下呈現(xiàn)正像可見(jiàn)，正面在上呈現(xiàn)倒像不可見(jiàn) */
.photo_back ?.photo_warp{transform: rotateY(180deg);-webkit-transform: rotateY(180deg);}?
2015-05-14
.photo?.side-back{
????-webkit-transform:rotateY(180deg);
是這個(gè)的原因吧 ?photo div旋轉(zhuǎn)了