Html
    Css
    Js
@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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css 左右3D翻转

纯css3 图片可以左右3d翻转, 运用css3 的动画属性使图片,让图片旋转并切换图片

0