html图片阵列,CSS3 动感方块阵列

CSS

语言：

CSSSCSS

确定

.wrapper {

clear: both;

}

.tile {

float: left;

height: 90px;

margin: 10px;

position: relative;

width: 120px;

}

.tile > div {

background-color: #ccc;

bottom: 0;

box-shadow: 0 5px 5px -5px #000;

box-sizing: border-box;

color: #fff;

font-size: 24px;

font-weight: bold;

left: 0;

padding: 10px;

position: absolute;

right: 0;

text-align: center;

top: 0;

transition: all 1s ease-in-out;

}

.bottom,

.left,

.right,

.up {

-webkit-perspective: 150px;

perspective: 150px;

}

.bottom > div {

text-shadow: 0 1px 1px #000;

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

transform: rotateX(-15deg);

}

.up > div {

text-shadow: 0 -1px 1px #000;

-webkit-transform: rotateX(15deg);

transform: rotateX(15deg);

}

.left > div {

text-shadow: 1px 0 1px #000;

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

transform: rotateY(-15deg);

}

.right > div {

text-shadow: -1px 0 1px #000;

-webkit-transform: rotateY(15deg);

transform: rotateY(15deg);

}

button {

background-color: #f09;

border: none;

color: #fff;

margin: 10px;

padding: 10px;

transition: all 1s ease-in-out;

}

button:hover {

background-color: #09f;

}