html5 3d 产品,HTML5 响应式3D商品卡片列表

CSS

语言：

CSSSCSS

确定

* {

padding: 0;

margin: 0;

}

html {

box-sizing: border-box;

}

html *,

html *:before,

html *:after {

box-sizing: inherit;

}

.clearfix:after {

content: '';

display: block;

clear: both;

width: 0;

height: 0;

}

body {

padding: 3em;

font: 100%/1.375em 'Exo 2', sans-serif;

background: #f3f4f4;

}

h1 {

margin-bottom: 0.5em;

color: #2761b1;

font-size: 200%;

font-weight: bold;

text-align: center;

}

.records {

list-style: none;

padding: 1em;

margin: 0 auto;

text-align: center;

}

.csstransforms3d .records {

-webkit-perspective: 2000;

perspective: 2000;

}

.records li {

position: relative;

display: inline-block;

width: 300px;

height: 420px;

margin: 0.5em;

text-align: left;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

cursor: pointer;

}

.csstransforms3d .records li {

-webkit-transition: 200ms;

transition: 200ms;

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

transform-style: preserve-3d;

}

.csstransforms3d .records .flip {

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

.records .front,

.records .back {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #eee;

background-repeat: no-repeat;

border: 10px solid #fff;

}

.records .front {

background-position: center;

background-size: cover;

}

.records .back {

background-image: url(http://img.lrytas.lt/show_foto/?id=368832&f=4&s=19);

background-size: 100%;

background-position: center -7.5em;

}

.records .back,

.records .flip .front {

display: none;

}

.records .flip .back {

display: block;

}

.csstransforms3d .records .front,

.csstransforms3d .records .back {

display: block;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.csstransforms3d .records .front {

-webkit-transform: rotateY(0);

transform: rotateY(0);

}

.csstransforms3d .records .back {

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

.records .front:after {

content: '';

position: absolute;

display: block;

background-repeat: no-repeat;

background-size: 100%;

}

.records .front[data-team="oilers"]:after {

top: 10px;

right: 10px;

width: 2.5em;

height: 2.5em;

background-image: url(http://nickthibault.com/wp-content/uploads/2013/10/Edmonton-Oilers-Logo.png);

}

.records .front[data-team="kings"]:after {

top: 15px;

right: 8px;

width: 4em;

height: 4em;

background-image: url(/uploads/150601/1280px-LosAngelesKings1988.svg.png);

}

.records h3 {

position: absolute;

top: 100%;

left: 10px;

width: 400px;

padding: 0.5em 3em 0.5em 0.75em;

color: #fff;

font-size: 120%;

background: rgba(39, 97, 177, 0.7);

-webkit-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

transform: rotate(-90deg);

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

}

.record-value {

position: absolute;

bottom: 30px;

right: 10px;

min-width: 1.65em;

padding: 0.15em 0.25em;

color: #c73408;

font-size: 300%;

line-height: 1em;

font-weight: bold;

text-align: center;

background: rgba(255, 255, 255, 0.7);

}

.record-value:after {

content: 'More info \00A0\00A0 ➤';

position: absolute;

top: 100%;

left: 0;

display: block;

width: 100%;

padding: 0.5em;

color: #fff;

font-size: x-small;

line-height: 1em;

font-weight: normal;

text-transform: uppercase;

text-align: right;

background: #c73408;

}

.record-date {

position: absolute;

z-index: 1;

top: 10px;

left: -10px;

display: inline-block;

padding: 0.572em 1em;

color: #fff;

text-transform: uppercase;

background: #c73408;

}

.record-details {

padding: 20px;

font-size: 87.5%;

}

.record-details:before {

content: attr(data-title);

display: block;

width: 80%;

height: 40px;

margin-bottom: 1em;

color: #fff;

font-weight: bold;

font-size: 130%;

text-shadow: 0 0 20px #003264, 0 0 5px rgba(0, 50, 100, 0.5);

}

.record-details:after {

content: attr(data-value);

position: absolute;

top: 10px;

right: -10px;

display: block;

padding: 0.65em 1em;

color: #fff;

text-align: right;

background: #c73408;

}

.career-points .front {

background-image: url(http://ecx.images-amazon.com/images/I/81yc%2BKNXZTL._SL1500_.jpg);

}

.career-goals .front {

background-image: url(http://usatftw.files.wordpress.com/2014/01/wayne-gretzky-g1scov05-1c.jpg?w=600);

}