Kort
缩略图预览的概念。悬停缩略图，
或触摸和滑动如果你在触摸装置。
CSS3实现3D图片翻转洗牌特效
工具/原料
adobe dreamweaver
方法/步骤
1
准备好需要用到的图标。
2
新建html文档。
3 
书写hmtl代码。
Default
Concave
Stack
4
书写css代码。* { margin: 0; padding: 0; }html { width: 100%; min-height: 100%; overflow-x: hidden; }body { padding-bottom: 100px; background: rgb(122,188,255); background: -moz-radial-gradient(center, ellipse cover, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); background: radial-gradient(ellipse at center, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); font-family: 'Lato', Helvetica, sans-serif; font-size: 18px; color: #fff; text-align: center; }a { color: #e7e388; text-decoration: none; -webkit-transition: 0.15s color ease; -moz-transition: 0.15s color ease; -ms-transition: 0.15s color ease; -o-transition: 0.15s color ease; transition: 0.15s color ease; }a:hover { color: #fff; }h1 { font-size: 30px; margin: 0 0 15px 0; }h2 { font-size: 18px; opacity: 0.6; font-weight: normal; }p { margin-bottom: 10px; }.contents { padding: 40px 0px; margin-bottom: 30px; border-bottom: 1px solid #222; color: white; background: #39536B; }.thumb { position: relative; width: 200px; height: 200px; margin: 20px auto 60px auto; }.thumb img { position: absolute; top: 0; left: 0; border: 5px solid white; box-shadow: 0px 0px 1px rgba( 0, 0, 0, 0.8 ); }.kort { -webkit-perspective: 1200px; -moz-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-touch-callout: none; -webkit-user-select: none; }.kort img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }.kort:hover img, .kort.touching img { -webkit-transform: translateX( -60% ) rotateY( 60deg ) translateZ(-80px); -moz-transform: translateX( -60% ) rotateY( 60deg ) translateZ(-80px); -o-transform: translateX( -60% ) rotateY( 60deg ) translateZ(-80px); transform: translateX( -60% ) rotateY( 60deg ) translateZ(-80px); }.kort:hover img.present ~ img, .kort.touching img.present ~ img { -webkit-transform: translateX( 82% ) rotateY( 50deg ); -moz-transform: translateX( 82% ) rotateY( 50deg ); -o-transform: translateX( 82% ) rotateY( 50deg ); transform: translateX( 82% ) rotateY( 50deg ); }.kort.concave:hover img.present ~ img, .kort.concave.touching img.present ~ img { -webkit-transform: translateX( 60% ) rotateY( -60deg ) translateZ(-80px); ; -moz-transform: translateX( 60% ) rotateY( -60deg ) translateZ(-80px); ; -o-transform: translateX( 60% ) rotateY( -60deg ) translateZ(-80px); ; transform: translateX( 60% ) rotateY( -60deg ) translateZ(-80px); ; }.kort.stack:hover img, .kort.stack.touching img { -webkit-transform: translateZ(-180px) rotateY( -60deg ); -moz-transform: translateZ(-180px) rotateY( -60deg ); -o-transform: translateZ(-180px) rotateY( -60deg ); transform: translateZ(-180px) rotateY( -60deg ); }.kort.stack:hover img.present ~ img, .kort.stack.touching img.present ~ img { -webkit-transform: translateX( 82% ) rotateY( 50deg ); -moz-transform: translateX( 82% ) rotateY( 50deg ); -o-transform: translateX( 82% ) rotateY( 50deg ); transform: translateX( 82% ) rotateY( 50deg ); }.kort:hover img.present, .kort.touching img.present { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; margin: 0!important; }
5
代码整体结构。
6
查看效果。
上一篇：lol野区大洗牌