足球比赛图文可以转换文字吗(使用CSS画出3D足球)

之前一直想过用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%);
}

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

首先，我们要先算出来球的半径，在足球赤道上，其实是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')
}

简单加个动画效果，一个3D的足球就完成了。

由于是平面拼接而成，所有效果无法像真实足球那样特别的圆。

不过一个足球的原理基本解释清楚了。后期我在考虑将五边形和六边形继续拆分成更小的图形来让足球更加的圆润。

代码仓库地址：

https://github/shb190802/html5

演示地址：

https://suohb/demo/win/globe3.html