概述

在三维空间，每个3D模型都等同于一个多面体，即3D模型只能由不弯曲的平面组成。只能以一个正多边形表示圆，边越多，圆就越完美。

球面投影的承影面切于球面，视点位于切点的对点上，投影平面垂直于过视点的直径，所以球的投影片面是一个距形。

css球面投影的实现

切割球面投影

从上面可得球面投影是一个矩形，需要实现跟圆柱一样滚动，首先将球面投影切割成多个多边形

用position:absolute将包含各张图片的div盒子重叠在一起

#box > div{
	position: absolute;
	width: 8.0625rem;
	height: 73.125rem;	
}

计算各个div盒子要旋转的角度，并且投影片面到中心的距离

deg是图片旋转的角度，R是投影到中心的距离。用css实现的原理就是先将图片rotatey旋转deg的角度，然后在用translatez移到所在的投影上

var translate = calculateRadius(129, 20);
//依次给每天div加背景图片，360/20=18度，在Y轴旋转一次增加18度，然后Z轴推出radius的距离即可。
for (var i = 0; i < arr.length; i++) {
	arr[i].style.background = 'url("./img/p' + (i + 1) + '.png") no-repeat';
	arr[i].style.WebkitTransform = "rotateY(" + 360 / arr.length * i + 'deg) translatez(' + translate+ 'px)';
}

//计算半径，第一个参数是图片的宽，第二个是图片数量，PI是180度，-3去衔接的黑边。round是四舍五入
function calculateRadius(length, totalNum) {
	return Math.round(length / (2 * Math.tan(Math.PI / totalNum))) - 3;
}

为了造成视觉差，不看到全景旋转，只看到旋转部份，可以用perspective属性

.container {
  margin: -50px auto 0 auto;
  width: 8.0625rem;
  height: 5.125rem;
  /*perspective: 25rem;*/

  animation: persPect 6s both;
  -ms-animation: persPect 6s both;
  -moz-animation: persPect 6s both;
  -webkit-animation: persPect 6s both;
  -o-animation: persPect 6s both;
}

@keyframes persPect {
  0% {
    perspective: 5rem;
  }
  100% {
    perspective: 25rem;
  }
}

代码地址

github.com/QiZhongdd/z…

CSS球面投影

概述

css球面投影的实现

代码地址