#wrap {
	z-index:100;
	position:relative;
	max-width:900px;
	margin:10% auto 0 auto;
}
@media screen and (orientation:landscape) {
/* css[横向定义样式] */
	#wrap {
		margin:10% auto 0 auto;
	}
	#logo {
		width:30%;
	}
}
@media screen and (orientation:portrait){
/* css[竖向定义样式] */
	#wrap {
		margin:60% auto 0 auto;
	}
	#logo {
		width:40%;
	}
}

.roll {
	transform: rotateX(0deg) rotateY(0deg);
	transform-origin: 50% 0;
	transform-style: preserve-3d;

	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;

	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-origin: 50% 0;

	animation: xuanzhuan 5s infinite ease;
	-moz-animation: xuanzhuan 5s infinite ease; /* Firefox */
	-webkit-animation: xuanzhuan 5s infinite ease; /* Safari 和 Chrome */
	-o-animation: xuanzhuan 5s infinite ease; /* Opera */
}
@keyframes xuanzhuan {
	from {
		transform: rotateX(0deg) rotateY(45deg);
		-webkit-transform: rotateX(0deg) rotateY(45deg);
		-moz-transform: rotateX(0deg) rotateY(45deg);
	}

	to {
		transform: rotateX(0deg) rotateY(1080deg);
		-webkit-transform: rotateX(0deg) rotateY(1080deg);
		-moz-transform: rotateX(0deg) rotateY(1080deg);
	}
}