@charset "utf-8"; /* CSS Document */ .data2 { width:100%; display:table; position:relative; overflow:hidden; } .data2 .pic2 { position:absolute; top:0; left:0; z-index:-1; } .data2 .image_container a { width:100%; height:100%; display:block; float:left; perspective:600px; -webkit-perspective:600px; -moz-perspective:600px; } .data2 .image_container a .pic1 { transform:rotateX(0deg) rotateY(0deg); transform-style:preserve-3d; backface-visibility:hidden; -webkit-transform:rotateX(0deg) rotateY(0deg); -webkit-transform-style:preserve-3d; -webkit-backface-visibility:hidden; -moz-transform:rotateX(0deg) rotateY(0deg); -moz-transform-style:preserve-3d; -moz-backface-visibility:hidden; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto?expand',M11=0.7660444431189777,M12=-0.6427876096865394,M21=0.6427876096865398,M22=0.7660444431189779) } .data2 .image_container a:hover .pic1 { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto?expand',M11=0.7660444431189777,M12=-0.6427876096865394,M21=0.6427876096865398,M22=0.7660444431189779) } .data2 .image_container a .pic2 { transform:rotateY(-180deg); transform-style:preserve-3d; backface-visibility:hidden; -webkit-transform:rotateY(-180deg); -webkit-transform-style:preserve-3d; -webkit-backface-visibility:hidden; -moz-transform:rotateY(-180deg); -moz-transform-style:preserve-3d; -moz-backface-visibility:hidden; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; /*z-index:10; position:absolute; */ filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto?expand',M11=0.7660444431189777,M12=-0.6427876096865394,M21=0.6427876096865398,M22=0.7660444431189779) } .data2 .image_container a:hover .pic2 { transform:rotateX(0deg) rotateY(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg); -moz-transform:rotateX(0deg) rotate(0deg); z-index:10; position:absolute; filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto?expand',M11=0.7660444431189777,M12=-0.6427876096865394,M21=0.6427876096865398,M22=0.7660444431189779) } .data2 .row { width:185px; height:186px; float:left; margin-left:48px; margin-right:48px; margin-bottom:46px; position:relative; z-index:10; } .data2 .row .pic1 { width:100%; height:100%; overflow:hidden; } .data2 .row .pic2 { width:100%; height:100%; overflow:hidden; } .data2 .row .pic2 img { position:absolute; }
纯css3 图片可以左右3d翻转, 运用css3 的动画属性使图片,让图片旋转并切换图片