日期时间变化时出现翻转的3D立体动效
源码下载:https://gitee.com/tangying_cn/blog_file/blob/master/7-8.zip
HTML
<div class="cont1">
<img src="img/bg1.png" width='100%'>
<div class="cont1-info">
<div class="date"><img src="img/02.png"></div>
<div class="date"><img src="img/0.png"></div>
<div class="date"><img src="img/01.png"></div>
<div class="date">
<div id="stage-1" class="stage stage-state-default">
<div class="stage-content">
<ul class="stage-1-icon">
<li class="stage-1-icon-1"><span class="stage-1-icon-top"></span> <span class="stage-1-icon-bottom"></span> </li>
<li class="stage-1-icon-2"> <span class="stage-1-icon-top"></span> <span class="stage-1-icon-bottom"></span> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
max-width: 640px;
margin: 0 auto;
background: #FFF9F2;
}
@media (min-width: 320px) {
html {
font-size: 12px;
}
}
@media (min-width: 360px) {
html {
font-size: 14px;
}
}
.cont1 {
position: relative;
}
.cont1-info {
position: absolute;
left: 0;
top: 45%;
width: 100%;
text-align: center;
}
.date {
display: inline-block;
margin: 0;
font-size: 0;
width: 5.3rem;
height: 8rem;
}
.date img {
width: 100%;
height: 100%;
}
#stage-1 .stage-content {
width: 100%;
height: 8rem;
}
.stage-1-icon {
width: 100%;
height: 8rem;
position: relative;
-webkit-perspective: 900px;perspective: 900px;
padding: 0;
}
.stage-1-icon-1 {
height: 8rem;
}
.stage-1-icon-top,
.stage-1-icon-bottom {
width: 100%;
height: 4rem;
position: absolute;
left: 0;
background-size: 5.3rem 8rem;
background-repeat: no-repeat;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.stage-1-icon-top {
top: 0;
background-position: center top;
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-ms-transform-origin: center bottom;
-o-transform-origin: center bottom;
transform-origin: center bottom
}
.stage-1-icon-bottom {
top: 4rem;
background-position: center -4rem;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
-o-transform-origin: center top;
transform-origin: center top
}
.stage-1-icon-1 .stage-1-icon-top,
.stage-1-icon-1 .stage-1-icon-bottom {
z-index: 2;
background-image: url(img/07.png);
}
.stage-1-icon-2 .stage-1-icon-top,
.stage-1-icon-2 .stage-1-icon-bottom {
z-index: 1;
background-image: url(img/08.png);
}
@-webkit-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-ms-keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes flipover-top {
0% {
z-index: 8;
-webkit-transform: rotateX(0);
}
50% {
z-index: 8;
-webkit-transform: rotateX(-90deg);
}
51% {
z-index: 7;
opacity: 1;
}
100% {
z-index: 7;
opacity: 0;
-webkit-transform: rotateX(-180deg);
}
}
@-moz-keyframes flipover-top {
0% {
z-index: 8;
-moz-transform: rotateX(0);
}
50% {
z-index: 8;
-moz-transform: rotateX(-90deg);
}
51% {
z-index: 7;
opacity: 1;
}
100% {
z-index: 7;
opacity: 0;
-moz-transform: rotateX(-180deg);
}
}
@-ms-keyframes flipover-top {
0% {
z-index: 8;
-ms-transform: rotateX(0);
}
50% {
z-index: 8;
-ms-transform: rotateX(-90deg);
}
51% {
z-index: 7;
opacity: 1;
}
100% {
z-index: 7;
opacity: 0;
-ms-transform: rotateX(-180deg);
}
}
@-o-keyframes flipover-top {
0% {
z-index: 8;
-o-transform: rotateX(0);
}
50% {
z-index: 8;
-o-transform: rotateX(-90deg);
}
51% {
z-index: 7;
opacity: 1;
}
100% {
z-index: 7;
opacity: 0;
-o-transform: rotateX(-180deg);
}
}
@keyframes flipover-top {
0% {
z-index: 8;
transform: rotateX(0);
}
50% {
z-index: 8;
transform: rotateX(-90deg);
}
51% {
z-index: 7;
opacity: 1;
}
100% {
z-index: 7;
opacity: 0;
transform: rotateX(-180deg);
}
}
@-webkit-keyframes flipover-bottom {
0% {
z-index: 7;
-webkit-transform: rotateX(180deg);
}
50% {
z-index: 7;
-webkit-transform: rotateX(90deg);
}
51% {
z-index: 8;
}
100% {
z-index: 8;
-webkit-transform: rotateX(0);
}
}
@-moz-keyframes flipover-bottom {
0% {
z-index: 7;
-moz-transform: rotateX(180deg);
}
50% {
z-index: 7;
-moz-transform: rotateX(90deg);
}
51% {
z-index: 8;
}
100% {
z-index: 8;
-moz-transform: rotateX(0);
}
}
@-ms-keyframes flipover-bottom {
0% {
z-index: 7;
-ms-transform: rotateX(180deg);
}
50% {
z-index: 7;
-ms-transform: rotateX(90deg);
}
51% {
z-index: 8;
}
100% {
z-index: 8;
-ms-transform: rotateX(0);
}
}
@-o-keyframes flipover-bottom {
0% {
z-index: 7;
-o-transform: rotateX(180deg);
}
50% {
z-index: 7;
-o-transform: rotateX(90deg);
}
51% {
z-index: 8;
}
100% {
z-index: 8;
-o-transform: rotateX(0);
}
}
@keyframes flipover-bottom {
0% {
z-index: 7;
transform: rotateX(180deg);
}
50% {
z-index: 7;
transform: rotateX(90deg);
}
51% {
z-index: 8;
}
100% {
z-index: 8;
transform: rotateX(0);
}
}
#stage-1.stage-state-default .stage-1-icon-bottom {
-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(180deg) rotateY(0) rotateZ(0) rotate(0);
-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(180deg) rotateY(0) rotateZ(0) rotate(0);
-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(180deg) rotateY(0) rotateZ(0) rotate(0);
-o-transform: translateX(0) translateY(0) translateZ(0) rotateX(180deg) rotateY(0) rotateZ(0) rotate(0);
transform: translateX(0) translateY(0) translateZ(0) rotateX(180deg) rotateY(0) rotateZ(0) rotate(0)
}
#stage-1.stage-state-default .stage-1-icon-1 .stage-1-icon-bottom {
-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
-o-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0)
}
#stage-1.stage-state-default .stage-1-icon-1 .stage-1-icon-bottom {
-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
-o-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0);
transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) rotate(0)
}
#stage-1.stage-state-default .stage-1-icon-1 .stage-1-icon-top {
-webkit-animation: flipover-top 1s linear 1s normal forwards;
-moz-animation: flipover-top 1s linear 1s normal forwards;
-ms-animation: flipover-top 1s linear 1s normal forwards;
-o-animation: flipover-top 1s linear 1s normal forwards;
animation: flipover-top 1s linear 1s normal forwards
}
#stage-1.stage-state-default .stage-1-icon-2 .stage-1-icon-bottom {
-webkit-animation: flipover-bottom 1s linear 1s normal forwards;
-moz-animation: flipover-bottom 1s linear 1s normal forwards;
-ms-animation: flipover-bottom 1s linear 1s normal forwards;
-o-animation: flipover-bottom 1s linear 1s normal forwards;
animation: flipover-bottom 1s linear 1s normal forwards
}