有兩個問題需要注意,(1)老師為了演示,添加了一個photo_back類到 photo類里了。這里的photo_front和photo_front應該是JS控制切換正反面用的。需要特別注意!
(2)backface-visibility:hidden;設置之后正反面是不可能同時看到的,一個周期內(180deg),0-90deg只能看到正面,90-180deg才能看到背面。
圖片翻轉代碼歡迎到我的筆記里看看。
(2)backface-visibility:hidden;設置之后正反面是不可能同時看到的,一個周期內(180deg),0-90deg只能看到正面,90-180deg才能看到背面。
圖片翻轉代碼歡迎到我的筆記里看看。
2016-12-09
看了老師的視頻好幾遍 發現了這么幾個問題:
1..photo .photo-wrap應該加入{
transform-origin: 0% 50% ;
}不然不是視頻里翻轉的效果
2..photo .side-front{
}或者.photo .side-back里面如果有display:none的話那也不能翻轉 因為隱藏
1..photo .photo-wrap應該加入{
transform-origin: 0% 50% ;
}不然不是視頻里翻轉的效果
2..photo .side-front{
}或者.photo .side-back里面如果有display:none的話那也不能翻轉 因為隱藏
2016-12-07
這是跟著老師來實現的代碼,歡迎點評和參考 ^-^~
https://github.com/Vivian-kawei/PhotoGallery-byJavaScript
https://github.com/Vivian-kawei/PhotoGallery-byJavaScript
var template =g('#wrap').innerHTML;和<img src="photo/{{img}}"/>報錯