@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 的动画属性使图片,让图片旋转并切换图片