@charset "utf-8";
/* CSS Document */

html{
	font-family:arial;
	color:#aaa;
}
body{
	background-color:#2C3437;
}

a{
	color:#5555ff;
}

ul{
	width: 500px;
}
li{
	display: inline-block;
	list-style: none;
	margin: 2px 0;
}
.container{
	text-align:center;
	perspective:500px;
	-webkit-perspective:500px;
	border: 1px solid;
}
.example{
	display:table-cell;
	vertical-align:middle;
	color: #fff;
	width: 150px;
	height: 150px;
	background:url(../images/1.jpg) no-repeat;
}


@-webkit-keyframes topenter {
    from {
        -webkit-transform-origin:top;
        -webkit-transform:rotateX(-90deg);
    }
    to {
        -webkit-transform-origin:top;
        -webkit-transform:rotateX(0deg);
    }
}
@keyframes topenter {
    from {
        transform-origin:top;
        transform:rotateX(-90deg);
    }
    to {
        transform-origin:top;
        transform:rotateX(0deg);
    }
}
@-webkit-keyframes topleave {
    from {
        -webkit-transform-origin:top;
        -webkit-transform:rotateX(0deg);
    }
    to {
        -webkit-transform-origin:top;
        -webkit-transform:rotateX(-90deg);
    }
}
@keyframes topleave {
    from {
        transform-origin:top;
        transform:rotateX(0deg);
    }
    to {
        transform-origin:top;
        transform:rotateX(-90deg);
    }
}
@-webkit-keyframes bottomenter {
    from {
        -webkit-transform-origin:bottom;
        -webkit-transform:rotateX(90deg);
    }
    to {
        -webkit-transform-origin:bottom;
        -webkit-transform:rotateX(0deg);
    }
}
@keyframes bottomenter {
    from {
        transform-origin:bottom;
        transform:rotateX(90deg);
    }
    to {
        transform-origin:bottom;
        transform:rotateX(0deg);
    }
}
@-webkit-keyframes bottomleave {
    from {
        -webkit-transform-origin:bottom;
        -webkit-transform:rotateX(0deg);
    }
    to {
        -webkit-transform-origin:bottom;
        -webkit-transform:rotateX(90deg);
    }
}
@keyframes bottomleave {
    from {
        transform-origin:bottom;
        transform:rotateX(0deg);
    }
    to {
        transform-origin:bottom;
        transform:rotateX(90deg);
    }
}
@-webkit-keyframes leftenter {
    from {
        -webkit-transform-origin:left;
        -webkit-transform:rotateY(90deg);
    }
    to {
        -webkit-transform-origin:left;
        -webkit-transform:rotateY(0deg);
    }
}
@keyframes leftenter {
    from {
        transform-origin:left;
        transform:rotateY(90deg);
    }
    to {
        transform-origin:left;
        transform:rotateY(0deg);
    }
}
@-webkit-keyframes leftleave {
    from {
        -webkit-transform-origin:left;
        -webkit-transform:rotateY(0deg);
    }
    to {
        -webkit-transform-origin:left;
        -webkit-transform:rotateY(90deg);
    }
}
@keyframes leftleave {
    from {
        transform-origin:left;
        transform:rotateY(0deg);
    }
    to {
        transform-origin:left;
        transform:rotateY(90deg);
    }
}
@-webkit-keyframes rightenter {
    from {
        -webkit-transform-origin:right;
        -webkit-transform:rotateY(-90deg);
    }
    to {
        -webkit-transform-origin:right;
        -webkit-transform:rotateY(0deg);
    }
}
@keyframes rightenter {
    from {
        transform-origin:right;
        transform:rotateY(-90deg);
    }
    to {
        transform-origin:right;
        transform:rotateY(0deg);
    }
}
@-webkit-keyframes rightleave {
    from {
        -webkit-transform-origin:right;
        -webkit-transform:rotateY(0deg);
    }
    to {
        -webkit-transform-origin:right;
        -webkit-transform:rotateY(-90deg);
    }
}
@keyframes rightleave {
    from {
        transform-origin:right;
        transform:rotateY(0deg);
    }
    to {
        transform-origin:right;
        transform:rotateY(-90deg);
    }
}