3d变换美女图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.wutai{
			width: 600px;
			height: 400px;
			border: 1px solid blue;
			margin: 20px auto;
			perspective: 800px;
			perspective-origin:300px 200px;
		}
		.rongqi{
			width: 200px;
			height: 300px;
			border: 1px solid green;
			position: relative;
			left:50%;
			top:30px;
			margin-left: -100px;
			transform-style: preserve-3d;
			transform:rotateX(-20deg);

		}
		.wutai .rongqi img{
			width: 200px;
			height: 300px;
			position: absolute;
			left: 0;top: 0;
			transform-style: preserve-3d;
			transform:rotateX(-20deg);
		}
		.wutai .rongqi img:nth-child(1){
			transform:rotateY(40deg) translateZ(300px);
		}
		.wutai .rongqi img:nth-child(2){
			transform:rotateY(80deg) translateZ(300px);
		}
		.wutai .rongqi img:nth-child(3){
			transform:rotateY(120deg) translateZ(300px);
		}
		.wutai .rongqi img:nth-child(4){
			transform:rotateY(160deg) translateZ(300px);
		}
		.wutai .rongqi img:nth-child(5){
			transform:rotateY(200deg) translateZ(300px);
		}
		.wutai .rongqi img:nth-child(6){
			transform:rotateY(240deg) translateZ(300px);
		}
		.wutai .rongqi img:nth-child(7){
			transform:rotateY(280deg) translateZ(300px);
		}
		.wutai .rongqi img:nth-child(8){
			transform:rotateY(320deg) translateZ(300px);
		}
		.wutai .rongqi img:nth-child(9){
			transform:rotateY(360deg) translateZ(300px);
		}


	</style>
</head>
<body>
	<div class="wutai">
		<div class="rongqi">
			<img src="./code/images/girl1.jpg" alt="">
			<img src="./code/images/girl2.jpg" alt="">
			<img src="./code/images/girl3.jpg" alt="">
			<img src="./code/images/girl4.jpg" alt="">
			<img src="./code/images/girl5.jpg" alt="">
			<img src="./code/images/girl6.jpg" alt="">
			<img src="./code/images/girl7.jpg" alt="">
			<img src="./code/images/girl8.jpg" alt="">
			<img src="./code/images/girl9.jpg" alt="">
		</div>
	</div>
</body>
</html>
猜你喜欢
