html5卡片式,HTML5 可翻滚卡片式模态框

CSS

语言：

CSSSCSS

确定

body {

background-color: #1d2020;

}

p {

color: #ecf0f1;

text-align: center;

}

a {

color: #95a5a6;

text-decoration: none;

}

.hidden {

opacity: 0;

}

.container {

width: 300px;

height: 300px;

margin: auto;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

-webkit-perspective: 800px;

perspective: 800px;

}

#card {

width: 100%;

height: 100%;

position: absolute;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transition: -webkit-transform 1s;

transition: transform 1s;

}

#card.flipped-anticlockwise {

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

#card.flipped-clockwise {

-webkit-transform: rotateY(-180deg);

transform: rotateY(-180deg);

}

#card.flipped {

-webkit-transform: rotateX(-180deg);

transform: rotateX(-180deg);

}

#card.flipped-back {

-webkit-transform: rotateX(180deg);

transform: rotateX(180deg);

}

#card figure {

background-color: #27ae60;

color: #fff;

display: block;

position: absolute;

width: 100%;

height: 100%;

box-shadow: 5px 5px 15px 0 #222;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

#card figure.back {

display: none;

background-color: #2980b9;

}

#card figure.back.rotateY {

display: inline;

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

#card figure.back.rotateX {

display: inline;

-webkit-transform: rotateX(-180deg);

transform: rotateX(-180deg);

}

.arrow-container {

font-size: 1.5em;

font-weight: bold;

width: 30px;

height: 30px;

margin: 0 auto;

text-align: center;

}

.arrow-container.top {

margin: 0 auto 135px auto;

height: 0;

}

.arrow-container.bottom {

width: 300px;

clear: both;

margin: 105px auto 0 auto;

}

.arrow-container.left-right {

width: 300px;

}

.arrow-container.left-right .left {

float: left;

}

.arrow-container.left-right .right {

float: right;

}

.arrow-container .arrow {

cursor: pointer;

}

.arrow-container .arrow:hover {

color: #c0392b;

}

.arrow-container .text {

font-weight: normal;

font-size: 0.8em;

}

.back .left-right {

margin-top: 135px;

}