CSS
语言：
CSSSCSS
确定
/*Basic Reset*/
* {
margin: 0;
padding: 0;
}
body {
background: #333;
/*Removing scrollers*/
overflow: hidden;
/*A high perspective to give the UL an isometric look*/
perspective: 3000;
}
.grid {
position: absolute;
top: 100px;
left: 0;
/*Width = (225 + 20 + 20) * 4 = 1060*/
width: 1060px;
/*3D Transform*/
transform: rotateX(60deg) rotateZ(-50deg);
/*Preserve 3D style for children*/
transform-style: preserve-3d;
//animation:move 4s ease-in infinite alternate;
}
.grid li {
height: 400px;
width: 225px;
float: left;
margin: 20px;
list-style-type: none;
/*Preserve 3D style for children(pseudo elements)*/
transform-style: preserve-3d;
background-size: cover;
}
/*Left and Bottom Sides*/
.grid li:before,
.grid li:after {
content: '';
position: absolute;
/*100% height and width*/
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
// box-shadow:5px 5px 15px 15px #333;
}
/*Left Side*/
.grid li:before {
transform-origin: left center;
transform: rotateY(90deg);
/*Reducing the width of the left side for a flat feel*/
width: 8px;
//height: 50px;
}
/*Bottom Side*/
.grid li:after {
transform-origin: bottom;
//transform:rotateY(40deg);
transform: rotateX(90deg);
background-position: bottom;
height: 8px;
top: auto;
}
/*temporary*/
li {
background: #999;
}
.one {
background: url("http://thecodeplayer.com/uploads/media/m1.png");
}
.two {
background: url("http://thecodeplayer.com/uploads/media/m2.png");
}
.three {
background: url("http://thecodeplayer.com/uploads/media/m3.png");
}
.four {
background: url("http://thecodeplayer.com/uploads/media/m4.png");
}
@Keyframes move {
50% {
transform: rotateX(-60deg) rotateZ(50deg)
}
100%
}