Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css 左右3D翻转

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

0