#stage
3
{
margin
:
2em
auto
1em
50%
;
height
:
240px
;
-webkit-perspective:
1200px
;
-webkit-perspective-origin:
0
90px
;
-moz-perspective:
1200px
;
-moz-perspective-origin:
0
90px
;
-ms-perspective:
1200px
;
-ms-perspective-origin:
0
90px
;
}
#rotator
3
a {
position
:
absolute
;
left
:
-151px
;
-moz-transform-style: preserve
-3
d;
}
#rotator
3
a img {
padding
:
10px
;
border
:
1px
solid
#ccc
;
background
:
#fff
;
-webkit-backface-
visibility
:
hidden
;
-moz-backface-
visibility
:
hidden
;
-ms-backface-
visibility
:
hidden
;
}
#rotator
3
a:nth-of-type(
1
) img {
-webkit-transform: rotateX(
-90
deg) translateZ(
100px
);
-moz-transform: rotateX(
-90
deg) translateZ(
100px
);
-ms-transform: rotateX(
-90
deg) translateZ(
100px
);
}
#rotator
3
a:nth-of-type(
2
) img {
-webkit-transform: translateZ(
100px
);
-moz-transform: translateZ(
100px
);
-ms-transform: translateZ(
100px
);
}
#rotator
3
a:nth-of-type(
3
) img {
-webkit-transform: rotateX(
90
deg) translateZ(
100px
);
-moz-transform: rotateX(
90
deg) translateZ(
100px
);
-ms-transform: rotateX(
90
deg) translateZ(
100px
);
}
#rotator
3
a:nth-of-type(n+
4
) {
display
:
none
; }
@-webkit-keyframes rotator
3
{
from { -webkit-transform: rotateX(
0
deg); }
to { -webkit-transform: rotateX(
90
deg); }
}
@-moz-keyframes rotator
3
{
from { -moz-transform: rotateX(
0
deg); }
to { -moz-transform: rotateX(
90
deg); }
}
@-ms-keyframes rotator
3
{
from { -ms-transform: rotateX(
0
deg); }
to { -ms-transform: rotateX(
90
deg); }
}
#rotator
3
{
-webkit-transform-origin:
0
101px
;
-webkit-transform-style: preserve
-3
d;
-webkit-animation-timing-function: cubic-bezier(
1
,
0.2
,
0.2
,
1
);
-webkit-animation-duration:
2
s;
-webkit-animation-delay:
1
s;
-moz-transform-origin:
0
101px
;
-moz-transform-style: preserve
-3
d;
-moz-animation-timing-function: cubic-bezier(
1
,
0.2
,
0.2
,
1
);
-moz-animation-duration:
2
s;
-moz-animation-delay:
1
s;
-ms-transform-origin:
0
101px
;
-ms-transform-style: preserve
-3
d;
-ms-animation-timing-function: cubic-bezier(
1
,
0.2
,
0.2
,
1
);
-ms-animation-duration:
2
s;
-ms-animation-delay:
1
s;
}
#rotator
3:
hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
}
文章评论