江苏龙网

  1. 首页 > 生活 > >

使用CSS能否用圆形图片做到球体的旋转效果

更新：今天其它人的回答把这个问题挖出来了，正好前段时间做了一个用dom画3D圆球的简单效果，也就是我下面第二段里说的，用多个片拼成一个不圆滑球形，你看到下图中的这个比较圆滑，其实只是这些小方块比较小而已。另外，三条彩带是三个坐标轴
大概效果就是下图这个样子，在线demo：http://xieranmaya.github.io/blog/demo/css-sphere.html
电脑太卡的话看着可能也会卡，毕竟这么多个二维面
至于我是如何做到让这么多小正方形在它所在有位置上正好倾斜那么个角度的，嘿嘿，你猜我是不是人肉一个个调的？？
最后，感叹一下数学之美吧~
使用CSS能否用圆形图片做到球体的旋转效果


=============
理论上目前css做不到这样的效果，因为css只能实现一个“片”，所有的元素都是二维的，而这个球明显是三维的
不过配合css的3d效果，可以大体上实现这样的效果：用多个小正多边形拼成一个不圆滑的“球”，就跟你在学生时代数学课上做的正20面体一样，把多面体的面增加到一定程度看起来就像个“球”了

■网友
可以用光影效果（box-shadow）， 配合一张球体展开图的position平移做到欺骗视觉的效果

■网友
如果你会sass和less可以试一下用动态计算的方法去处理那个圆形的图片，但理论上是这么说，感觉实践起来会相当的有难度呢......另外用svg或者canvas来画圆会好一点
■网友
/*其实是可以的，使用正方形的贴图，位置即为其大小*/@keyframes spin-ball{from {background-position:0px;}to {background-position:142px;}}.ball-X{position:absolute;width:100px;height:100px;border-radius:50%;background-image:url(\u0026#39;ball.jpg\u0026#39;);background-position:0px;animation:spin-ball 5s;animation-iteration-count: infinite;animation-timing-function: linear;}.in-ball-X{position:absolute;width:100px;height:100px;border-radius:50%;background-image:url(\u0026#39;ball.jpg\u0026#39;);background-position:0px;filter: blur(10px);animation:spin-ball 5s;animation-iteration-count: infinite;animation-timing-function: linear;}
\u0026lt;div style="position:relative;width:100%;height:200px;"\u0026gt;
\u0026lt;div class="ball-inner" style="position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform-origin:50px 50px;"\u0026gt;
\u0026lt;div class="ball-X" style="transform:rotateY(0deg);"\u0026gt;\u0026lt;div class="in-ball-X"\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;
\u0026lt;/div\u0026gt;
\u0026lt;/div\u0026gt;
具体效果自己实验，剩下的就是贴图制作问题，就如同地图展开之后也不是正常的形状是吧？
【使用CSS能否用圆形图片做到球体的旋转效果】 本质上就是利用人类视觉上的错觉，对于光影的变换就会产生空间认知。

■网友
可以去codepen上看看
■网友
可以假实现，效果也无法3d。截止到现在为止css在这方面还是相当的弱,并且没有看到希望。


    推荐阅读


    上一篇：江苏■6.23江苏天气预报

    下一篇：消费者是不是应该把网购普遍好评变为普遍中评