CSS3实现3D圆盘


<html>
	<head>
		<meta charset="utf-8">
		<title>展示元素移动的原理</title>
		<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
		<style>
			body {background:#222}
			.perspective {perspective:800px;}
			
			.perspective .wrap {
				width: 800px;
				height: 300px;

				margin: 100px auto;
				transform-style: preserve-3d; /*为了让div有3D效果*/
			}
			
			.perspective .wrap .plat {
				width: 1200px;
			    height: 1200px;
			    border-radius: 50%;
			    transform: rotateX(80deg);
			    position: absolute;
			    top: 134%;
			    left: 50%;
			    margin-left: -600px;
			    margin-top: -600px;
			    background: -webkit-radial-gradient(center center,500px 500px,rgb(44, 255, 148),rgb(251, 240, 111),rgb(228, 158, 142),rgb(232, 151, 211),rgb(161, 236, 163),rgba(63,139,175,0));
			}
			
			
			
			
		</style>			


		<script type="text/javascript">
			
			

		</script>


	</head>


	<body>
		
		
		<div class='perspective'>
			
			<div class='wrap'>
				
				<div class='plat'></div>
				
			</div>
			
		</div>
        
		

	</body>


</html>
posted on 2022-02-25 22:23 剽悍一小兔阅读(72) 评论(0) 收藏举报来源