WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

Flipping Cards 3D with jQuery/CSS3

— 添加到WorldWideScripts.net

訂閱我們的飼料,以保持最新

新!跟隨我們,你想要它


Flipping Cards 3D with jQuery/CSS3 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

翻轉的收集和使用CSS3 3D和jQuery卡的效果。
容易與您的CSS和HTML標記來實現
在所有現代瀏覽器的工作原理(谷歌Chrome,Safari瀏覽器和Firefox)


你所需要的:

  • flipCard.css(所有的風格和翻轉卡需要的效果)
  • flipCard.js(觸發效果所需要的所有事件)
  • jQuery的-1.8.3.min.js(用jQuery寫的)
  • 簡單的HTML標記(所有的例子都在index.html文件)

額外:
  • style.css的(一些隨機的風格基本標記,沒有必要)

您只需通過指定寬度和這個和平的CSS代碼改變高度的卡片尺寸:
.card容器{
寬度:200像素;
高度:200像素;
}

更改日誌

 ---->更新:2014年7月3日 修正了火狐V30的一些問題 ---->更新:2014年2月26日 現在,您可以指定容器div像這樣的比例:數據率=“1:2” ---->更新:2013年11月19日 現在回退與IE兼容11 ---->更新:2013年10月6日 修正了一些問題,當您將鼠標懸停在一個翻轉牌頁面時加載 ---->更新:2013年8月6日(替換CSS文件) 解決一些問題在Firefox的3D效果 ---->更新:2013年7月26日 修正了IE瀏覽器的一些錯誤控制台 ---->更新:2013年5月21日 修正了在Firefox中的一些癥結問題為過翻轉卡 ---->大更新時間:2013年5月6日 自動翻轉效果現已推出,您可以設置時間,直到卡將翻轉 自動,你也可以設定時間時,該卡將開始 做autoflips。 (你可以看到它在實時預覽) 注意:當您將自動翻轉卡片上做了鼠標懸停它不會翻轉,只要 你有鼠標在卡 新增的顏色主題翻轉卡片,你可以自己製作。 ---->更新:2013年4月28日 現在是用jQuery 1.9.1兼容 ---->更新時間:2013年4月10日, 還增加了淡入淡出效果後備對於不支持CSS3D像老版本的Chrome和Firefox瀏覽器的。 ---->更新:2013年2月18日 增加了的淡入淡出效果IE替代。 

下載
此類別中的其他組成部分這個作者的所有組件
評論常見問題和答案

屬性

創建:
13年1月2日

最後更新:
14年7月4日

兼容的瀏覽器:
火狐,Safari,Chrome瀏覽器

包括文件:
JS的JavaScript,HTML,CSS

軟件版本:
jQuery的

關鍵字

電子商務, 電子商務, 所有項目, 自動翻轉, 3D卡, 單擊懸停事件, CSS 3D, 翻轉卡3D, 翻轉卡, 多重效應, 旋轉3D, 計時器