制作3D球体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: #000000;
			}
			ul  li{
				list-style: none;
			}
			.box{
				width: 750px;
				height: 750px;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				transform-style:preserve-3d ;
				/* transform:rotateX(50deg)  rotateY(30deg); */
				/* background: rgba(0,0,255,0.4); */
				border:2px solid  blue;
				border-radius: 100%;
				animation: box  10s  ease  infinite  alternate;
				box-shadow: 0px  5px  20px  white;
			}
			@keyframes box{
				from{
					transform:rotateX(50deg)  rotateY(30deg) rotateZ(0deg);
				}
				to{
					transform:rotateX(50deg)  rotateY(30deg) rotateZ(360deg);
				}
			}
			.box  li{
				
				width: 300px;
				height: 300px;
				border: 1px  solid  blue;
				border-radius: 100%;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
			}
			.box  li:nth-child(1){
				transform:rotateX(20deg);
			}
			.box  li:nth-child(2){
				transform:rotateX(40deg);
			}
			.box  li:nth-child(3){
				transform:rotateX(60deg);
			}
			.box  li:nth-child(4){
				transform:rotateX(80deg);
			}
			.box  li:nth-child(5){
				transform:rotateX(100deg);
			}
			.box  li:nth-child(6){
				transform:rotateX(120deg);
			}
			.box  li:nth-child(7){
				transform:rotateX(140deg);
			}
			.box  li:nth-child(8){
				transform:rotateX(160deg);
			}
			.box  li:nth-child(9){
				transform:rotateX(180deg);
			}
			.box  li:nth-child(10){
				transform:rotateY(20deg);
			}
			.box  li:nth-child(11){
				transform:rotateY(40deg);
			}
			.box  li:nth-child(12){
				transform:rotateY(60deg);
			}
			.box  li:nth-child(13){
				transform:rotateY(80deg);
			}
			.box  li:nth-child(14){
				transform:rotateY(100deg);
			}
			.box  li:nth-child(15){
				transform:rotateY(120deg);
			}
			.box  li:nth-child(16){
				transform:rotateY(140deg);
			}
			.box  li:nth-child(17){
				transform:rotateY(160deg);
			}
		</style>
	</head>
	<body>
		<ul  class="box">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

效果图:

制作3D球体

上一篇:3D Max 8 创建一个棱柱


下一篇:sql – 如何在不选择ORDER BY字段的情况下选择DISTINCT行