javascript - html、css 中的 3-D 曲率拟合

Question

我见过有人使用变换来获得 3-D 效果。

但是如果我们只需要旋转 <div> 的一部分，我没有发现任何有用的东西.

我想知道我们如何应用变换来获得凹面、凸面等 3-D 效果。

如果我们只想转换 <div> 的 10% 怎么办？或者我们想要一个从左到右或从上到下增加和减少的转换？

或者，考虑一个球体，假设您想包裹一个 <div>以上，如何实现？

Answer 1

在撰写本文时，HTML 元素是扁平的。
即使 CSS3 引入了 3D Tranforms ，这些也只是用于转换，而不是用于渲染形状。

您实际上可以渲染一个由 6 个平面 HTMLElements 组成的 3d 立方体，但它们仍然是平面的。

see this David Walsh article on how to make a CSS Cube

我们可能会调整这个想法来创建一个球体，但是对于像下图这样光滑的球体，它将涉及 200 个多边形，这意味着 200 个不同的元素，每个元素都是唯一的 transform声明，并且您必须将您的内容分解为这些元素中的每一个。

我会让你找到数学来做这样的事情......

要在网页中呈现 3d 对象，您可以使用 WebGL API ，在 html5 <canvas> 元素中引入。

因此，如果您真的需要您的内容来获得这种 3d 效果，一个解决方案是首先使用 html2canvas 之类的库获取元素的快照，然后将其用作 webgl 上下文中的纹理。
这是一个使用 three.js 库的示例。

var div = document.querySelector('div');
	html2canvas(div, {
	  onrendered: function(canvas) {
	    initCanvas(div, canvas.toDataURL());
	  }
	});

	function initCanvas(replacedElement, src) {
	  var size = replacedElement.getBoundingClientRect();

	  var scene = new THREE.Scene();
	  var camera = new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
	  var renderer = new THREE.WebGLRenderer();

	  renderer.setSize(size.width, size.height);
	  renderer.domElement.setAttribute('style', 'top:' + size.top + 'px; left:' + size.left + 'px; position:absolute;');
	  replacedElement.parentNode.insertBefore(renderer.domElement, replacedElement.nextNode);

	  var geometry = new THREE.SphereGeometry(0.5, 32, 32)
	  var material = new THREE.MeshPhongMaterial()


	  var sphere = new THREE.Mesh(geometry, material);
	  scene.add(sphere);
	  material.map = THREE.ImageUtils.loadTexture(src)
	  material.map.minFilter = THREE.LinearFilter;
	  var light = new THREE.PointLight('#FFF', 10, 100);
	  light.position.set(32, 32, 80);
	  scene.add(light);
	  camera.position.z = 1;

	  function render() {
	    requestAnimationFrame(render);
	    renderer.render(scene, camera);
	    sphere.rotation.x += .01
	    sphere.rotation.y += .01
	  }
	  render();
	}

window.onresize=function(){	html2canvas(div, {
	  onrendered: function(canvas) {
        var c = document.querySelector('canvas');
        if(c)c.parentNode.removeChild(c);
	    initCanvas(div, canvas.toDataURL());
	  }
	});}

div {
  background-color: rgba(255, 255, 255, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div>


  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet bibendum augue, nec convallis enim bibendum non. Donec sagittis finibus lorem nec porttitor. Donec vel tincidunt ante. Praesent semper luctus arcu, at eleifend nibh dapibus sit
    amet. Aenean maximus ex in luctus bibendum. Nullam in ligula quis tellus convallis rutrum. Vivamus id placerat metus. Morbi efficitur sem at cursus bibendum. Ut fermentum odio in lectus posuere accumsan. Etiam imperdiet metus at ornare tempus. Suspendisse
    nulla metus, aliquam viverra elementum sed, consequat ac est. Sed lorem neque, finibus ac ultricies vel, ullamcorper ut nibh. Praesent est nulla, dictum eu commodo nec, sollicitudin condimentum ante.
  </p>
  <p>
    Donec metus nulla, rutrum ultrices elementum quis, blandit ac nisl. Etiam fermentum pharetra dui, vel eleifend ante blandit nec. Nunc varius eget arcu sit amet fermentum. Sed lorem turpis, mattis suscipit orci ut, feugiat volutpat dolor. Ut eu est dolor.
    Nulla aliquam libero at libero maximus, eget porta lorem malesuada. Curabitur in odio dolor. Praesent iaculis feugiat ipsum at malesuada. Nulla sed commodo leo, at fringilla arcu. Nulla tempus tellus sit amet augue sodales efficitur. Vestibulum tristique
    nunc et eros ornare, et mollis mi pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  </p>
  <p>
    Donec eu posuere sem. Etiam et massa non purus vehicula feugiat. Integer porta velit metus, eget tempor purus posuere non. Nam aliquam, lectus nec finibus venenatis, nunc urna porta lorem, commodo vehicula ex ante at augue. Vivamus nec erat sit amet nibh
    congue ullamcorper eget a eros. Integer varius turpis ut ex mollis, nec scelerisque est pretium. Phasellus nec lorem convallis, tincidunt ligula nec, ornare metus. Vivamus at lorem eget augue rhoncus varius. Curabitur hendrerit, nibh ut sagittis ultrices,
    ipsum elit tempus arcu, ac ullamcorper metus magna in lacus. Morbi elementum imperdiet magna in ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed fermentum leo, ac cursus sapien. Proin neque nisi, tempor vel massa et, consectetur
    eleifend sem.
  </p>
  <p>
    Aliquam erat volutpat. Donec lectus velit, rhoncus non euismod in, scelerisque sed libero. Nunc et neque est. Nam viverra ac quam interdum auctor. Nulla sed lacus mauris. Proin sit amet ultricies lorem. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nulla sed cursus neque.
  </p>
  <p>
    Curabitur blandit ipsum fermentum mauris consequat, ut feugiat nisl consequat. Nullam sit amet commodo diam. Etiam fringilla felis et augue mattis, sed dapibus massa tristique. Mauris ut nisi eget ex faucibus hendrerit. Mauris ut nisi nulla. Aenean et
    urna dolor. Aenean consectetur metus urna, a mattis orci pretium nec. Pellentesque non augue magna. In accumsan nisl tellus, id porttitor nisi feugiat eu. Curabitur eleifend urna ac augue congue tincidunt.
  </p>
</div>

但 <canvas> 元素仅呈现像素图像，而不是 HTML 元素，这意味着内容将不再可选择，链接将被破坏等...*并且您将面临 html2canvas' limitations 。^{* 请注意，您可以解决那些需要大量计算的问题}

另一个解决方案，如果你真的不需要对内容产生这种影响，那就是使用 CSS 径向渐变和边框半径来伪造它，正如 James Holderness 在 this answer 中所提出的那样:

var div = document.querySelector('div');
var pt=-100;
function animBG(){
	pt=((pt+101)%300)-100;
	div.style.backgroundImage= 'radial-gradient(ellipse at '+pt+'% '+pt+'% , rgb(255, 255, 255) 0%, rgb(214, 214, 214) 45%, rgb(174, 176, 173) 58%)';
	requestAnimationFrame(animBG)
	}
animBG();

div {
		  height: 600px;
		  width: 600px;
		  border-radius: 100%;
		  background: transparent radial-gradient(ellipse at 30% 20%, rgb(255, 255, 255) 0%, rgb(214, 214, 214) 45%, rgb(174, 176, 173) 58%) repeat scroll 0% 0%;
		  text-align: center;
		  position: relative;
          box-shadow: inset 0px 0px 15px rgba(60,60,60,.5);
		}
		div>p {
		  width: 344px;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  color: rgba(0, 0, 0, .7)
		}

<div>


  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet bibendum augue, nec convallis enim bibendum non. Donec sagittis finibus lorem nec porttitor. Donec vel tincidunt ante. Praesent semper luctus arcu, at eleifend nibh dapibus sit
    amet. Aenean maximus ex in luctus bibendum. Nullam in ligula quis tellus convallis rutrum. Vivamus id placerat metus. Morbi efficitur sem at cursus bibendum. Ut fermentum odio in lectus posuere accumsan. Etiam imperdiet metus at ornare tempus. Suspendisse
    nulla metus, aliquam viverra elementum sed, consequat ac est. Sed lorem neque, finibus ac ultricies vel, ullamcorper ut nibh. Praesent est nulla, dictum eu commodo nec, sollicitudin condimentum ante.
  </p>

</div>