css3动画

旋转3d 相册

<html>
<head>
<meta charset="UTF-8"/>
<title>3d旋转电子相册</title>
<style>
	*{margin: 0; padding: 0;}
	body, html{height: 100%;}
	body{
		background: url(images/bg2.jpg) no-repeat
	}
	#wrap {
		 280px;
		height: 400px;
		border: 1px solid #fff;
		position:fixed;
		left:0;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
		transform-style: preserve-3d;
		transform: rotateX(0deg) rotateY(0deg);
		animation: go 45s linear infinite ;
	}
	#wrap img{
		  280px;
		height: 400px;
		position: absolute ;
		left: 0;
		top:0;
	}
	#wrap img:nth-child(1){
		transform: rotateY(0deg) translateZ(650px);
	}

	#wrap img:nth-child(2){
		transform: rotateY(36deg) translateZ(650px);
	}


	#wrap img:nth-child(3){
		transform: rotateY(72deg) translateZ(650px);
	}
	#wrap img:nth-child(4){
		transform: rotateY(108deg) translateZ(650px);
	}

	#wrap img:nth-child(5){
		transform: rotateY(144deg) translateZ(650px);
	}

	#wrap img:nth-child(6){
		transform: rotateY(180deg) translateZ(650px);
	}

	#wrap img:nth-child(7){
		transform: rotateY(216deg) translateZ(650px);
	}

	#wrap img:nth-child(8){
		transform: rotateY(252deg) translateZ(650px);
	}

	#wrap img:nth-child(9){
		transform: rotateY(288deg) translateZ(650px);
	}

	#wrap img:nth-child(10){
		transform: rotateY(324deg) translateZ(650px);
	}


	@keyframes go{
		0%{transform: rotateX(0deg) rotateY(0deg)}
		25%{transform: rotateX(20deg) rotateY(180deg)}
		50%{transform: rotateX(0deg) rotateY(360deg)}
		75%{transform: rotateX(-20deg) rotateY(540deg)}
		100%{transform: rotateX(0deg) rotateY(720deg)}
	}
</style>
</head>
<body>
	<div id="wrap">
		<img src="images/1.jpg"/>	
		<img src="images/2.jpg"/>	
		<img src="images/3.jpg"/>	
		<img src="images/4.jpg"/>	
		<img src="images/5.jpg"/>	
		<img src="images/6.jpg"/>	
		<img src="images/7.jpg"/>	
		<img src="images/8.jpg"/>	
		<img src="images/9.jpg"/>	
	</div>
	<audio src="audio/xx.mp3" autoplay loop></audio>
	<img src="images/xx.jif" class="left_bottom"/>
</body>
</html>

------------------------------------------------------------------------------------------------------

3d透视

实时水平垂直居中！！！

transform-style: peserve-3d

ul li

{200px ; height:200px; background: rgba(255,121, 253, 0.5);

position:absolute;

left:0 ;top:0;

border:2px solid #000

}

ul li :nth-child(1){

　　transform: translateZ(100px)

　　transform: rotateX(15deg) rotateY(30deg)

}