当前位置：网站首页> 体育资料 > 迷你世界足球怎么画(使用CSS画出3D足球)

迷你世界足球怎么画(使用CSS画出3D足球)

更新时间：2022-10-10 17:36:34

之前一直想过用CSS做一个3D足球，前几天使用CSS画地球之后，突然就来了灵感。使用相同的思路来完成3D足球，没有看过请参考一下之前的文字《css-画一个3D地球》

先看效果：

需求分析：

足球是由12个五边形和20个六边形缝合而成。

首先，我们需要准备边长相同的五边形和六边形。

css画多边形的方式很多，这里我考虑到后期偏移的时候需要确定多边形重心的位置。

使用css的clip-path:polygon属性来完成多边形。首先我们画出六边形和五边形的外切圆，来确定外层div的尺寸。

暂定多边形边长为100：则可以算出，六边形外层div宽度为200；五边形外层div为170。

并且计算出多边形的每个顶点，在外切圆上的位置。（发挥你初中水平的时候到了）

.polygon {
	border-radius: 50%;
}
.polygon::after {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
}
.polygon6 {
	width: 200px;
	height: 200px;
	background: rgba(255, 0, 0, .6);
}
.polygon6::after {
	background: #FFF;
	clip-path: polygon(0 50%, 25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%);
}
.polygon5 {
	width: 170px;
	height: 170px;
	background: rgba(0, 255, 0, .6);
}
.polygon5::after {
	background: #000;
	clip-path: polygon(50% 0, 97.55% 34.55%, 79.39% 90.45%, 20.6% 90.45%, 2.45% 34.55%);
}

迷你世界足球怎么画(使用CSS画出3D足球)

第二步：我们需要将按规律将五边形和六边形贴到球形的表面

首先，我们要先算出来球的半径，在足球赤道上，其实是10个六边形的五条边和五条中线的连线。

我们大致推算出足球的赤道周长约为1500（没有计算直线和弧形的误差，此处我们不需要做到如此精细）

以此计算出，球的半径约为235左右。

我们从足球的北极开始到足球的南极，依次排布：1个五边形、5个六边形、5个五边形、5个六边形、5个六边形、5个五边形、5个六边形、1个五边形。

/**
* deg 纬度
* len 图形个数
* className 图形是5边形还是6边形
* Y轴上偏移角度
* Z轴上旋转角度
*/
function draw(deg, len, className, startDeg = 0, rotateDeg = 0) {
	var fragment = document.createDocumentFragment()
	for (var i = 0; i < len; i  ) {
		var div = document.createElement('div')
		div.className = className
		div.style.transform = 'rotateY('   ~~(360 / len * i   startDeg)   'deg) rotateX('   deg   'deg) rotateZ('   rotateDeg   'deg) translateZ(238px)'
		fragment.appendChild(div)
	}
	document.querySelector('.box').appendChild(fragment)
}
window.onload = function () {
	draw(-90, 1, 'polygon5')
	draw(-53, 5, 'polygon6', 36)
	draw(-28, 5, 'polygon5', 0, 180)
	draw(-11, 5, 'polygon6', 36)
	draw(11, 5, 'polygon6')
	draw(28, 5, 'polygon5', 36, 0)
	draw(53, 5, 'polygon6', 72)
	draw(90, 1, 'polygon5')
}