Kamis, 04 September 2014

Make Simple 3D Cube Image Gallery use CSS3

Terkadang kita sebagai pemakai kode yang sudah ada, selalu terpaku pada contoh yg sudah jadi! Seperti contoh pada tutorial trick effect hover pada kasus hover zoome make hover zoom effect use CSS. Kebanyakan dalam hal ini, para kreator CSS zoom selalu mencontohkan efek zoom dengan gambar, padahal kalau kita kreasikan kepada hal lain bisa jadi oke juga ;)
Tuh kan oke :P
AA Koben akan kembali sharing is caring tut lawas seputaran issue CSS 3D cube! Lumayan banyak juga para developer yg berkreasi dengan trik tersebut. Selain full stylish tentunya, terlihat elegan dan dinamis 8-> Berikut link sources keren punya:
    20 Stunning Examples Of CSS 3D Transforms
  • www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759
  • Creating a 3D Cube Image Gallery
  • css-tricks.com/creating-a-3d-cube-image-gallery
  • techglimpse.com/css-3d-photo-cube-image-gallery-demo
  • Simple 3D Photo Cube Image Gallery using CSS
Source terakhir itu yg akan AA kupas dengan edit coded comot sana-sini :">
DEMO

codepen.io/beben-koben/full/EyACg

Code

codepen.io/beben-koben/share/zip/EyACg

Sebagai bonus, source pilihan dari codepen siapa tauk jadi inspirasi bahan postingan :)
  • 3D Cube Rotating Menu
  • codepen.io/designcouch/pen/fFpCq
  • Coverflow Animation
  • codepen.io/mikefowler/pen/ujgqr
  • Slide Horizontal CSS-only Nav Menu
  • codepen.io/rickzanutta/pen/bBHAz
  • On link :focus preview url (CSS only)
  • codepen.io/jelmerdemaat/pen/aHuEw
  • Simpel javascript HTML Encoding
  • codepen.io/netsi1964/pen/joGre
  • Simple Cool popup
  • codepen.io/wifeo/pen/binaE
  • Share Button
  • codepen.io/onediv/pen/dkFco
Bye :-h

Tidak ada komentar:

Posting Komentar