css-3D线框地球

2020-09-17 特效CSS
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css球体</title>
</head>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	html,
	body,
	.container,
	.box {
		height: 100%;
	}

	.container,
	.box {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform-style: preserve-3d;
	}

	.container {
		perspective: 500px;
		overflow: hidden;
	}

	.box {
		animation: rotate 20s linear infinite;
	}

	.box>div {
		position: absolute;
		width: 320px;
		height: 320px;
		border: solid 1px #000;
		border-radius: 50%;
	}

	@keyframes rotate {
		0% {
			transform: rotateZ(23deg) rotateY(0deg);
		}

		100% {
			transform: rotateZ(23deg) rotateY(360deg);
		}
	}
</style>

<body>
	<div class="container">
		<div class="box"> </div>
	</div>
	<script>
		function addLongitude() {
			var count = 18
			var stepDeg = 180 / count
			var fragment = document.createDocumentFragment()
			for (var i = 0; i < count; i++) {
				var div = document.createElement('div')
				div.style.transform = 'rotateY(' + ~~(i * stepDeg) + 'deg)'
				fragment.appendChild(div)
			}
			document.querySelector('.box').appendChild(fragment)
		}

		function addLatitude() {
			var r = 160
			var stepDeg = 10
			var start = -80
			var end = 80
			var fragment = document.createDocumentFragment()
			for (var i = start; i <= end; i += stepDeg) {
				var div = document.createElement('div')
				var _r = ~~(Math.cos(i / 180 * Math.PI) * r * 2) + 'px'
				div.style.width = _r
				div.style.height = _r
				div.style.transform = 'translateY(' + ~~(Math.sin(i / 180 * Math.PI) * r) + 'px) rotateX(90deg)'
				fragment.appendChild(div)
			}
			document.querySelector('.box').appendChild(fragment)
		}

		window.onload = function () {
			addLongitude()
			addLatitude()
		}
	</script>
</body>

</html>
关注公众号
查看详细实现过程