Css3动画 如何画3D旋转效果或者卫星围绕旋转效果

Posted warm-stranger

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Css3动画 如何画3D旋转效果或者卫星围绕旋转效果相关的知识,希望对你有一定的参考价值。

如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容。好了,话不多说,进入正题。

我们都知道,浏览器是一个平面的视觉效果,如何在一个平面上看出立体的3D效果呢,其实就是一个视觉差的问题。那我们就从一个平面视觉效果一步一步画出立体的3D效果来。我还是先把效果放出来吧,点击预览(终版)

一、先画出平面视觉上卫星的旋转轨迹

卫星的轨迹一般都是圆的或者椭圆的,我们就先以一个圆形的轨迹为例。

 
技术图片
平面效果旋转的动画和轨迹

非常简单,就是画一个圆形的轨迹,然后利用弧度公式计算出每个卫星在轨迹上的位置。比如:

三个卫星,弧度就是 var radian =2 * Math.PI /360 *60,更多的卫星就同理计算弧度

它们三个组成的三角形边长就是:var langWidth = Math.sin(radian) * rWidth

利用勾股定理是不是就可以计算出每个卫星的位置了。 现在我们把样式加上,就可以看到旋转的卫星了。平面效果; 如代码中所示,我们在13s内,让整个div自转一周(360度),为了兼容更多的浏览器,所以写了一大坨,如果不明白可以看一下 CSS3 之动画及兼容性调优
涉及的知识点: 动画的过程拆分,三角形边长位置计算

.r1{
    animation:rotate 13s linear infinite;
    -webkit-animation:rotate 13s linear infinite;
    -moz-animation:rotate 13s linear infinite;
    -o-animation:rotate 13s linear infinite;
}
@keyframes rotate{
0%{
    transform:rotate(0deg)skew(0deg)scale(1);
    -ms-transform:rotate(0deg)skew(0deg)scale(1);
    -moz-transform:rotate(0deg)skew(0deg)scale(1);
    -webkit-transform:rotate(0deg)skew(0deg)scale(1);
    -o-transform:rotate(0deg)skew(0deg)scale(1);
}

100%{
    transform:rotate(360deg)skew(0deg)scale(1);
    -ms-transform:rotate(360deg)skew(0deg)scale(1);
    -moz-transform:rotate(360deg)skew(0deg)scale(1);
    -webkit-transform:rotate(360deg)skew(0deg)scale(1);
    -o-transform:rotate(360deg)skew(0deg)scale(1);
    }
}

二、画出卫星3D立体的旋转的效果

现在我们要把这个平面的圆形以一条直径为转轴,旋转76度,是不是就了一点点的立体感觉了。其实它还是一个平面,为什么能看到立体的感觉呢? 因为我们都知道一个远小近大的道理:当卫星转向内圈的时候,我们让球体逐渐变大;当卫星转向外圈的时候,我们让球体逐渐变小,这样就会产生一个远近景深的效果,也就产生了立体的感觉。

 

涉及的知识点:3D 元素距视图的距离(perspective),图形的角度处理
 
技术图片
立体旋转效果

三、画一个参照物

立体的旋转效果有了,但是我们的眼睛其实无法分辨哪个是内圈,哪个是外圈,我们需要在中间放一个参照物来告诉我们的眼睛,哪个在前,哪个在后。这样,一个完整的卫星围绕旋转效果就出来了。

 

涉及的知识点:让转换的子元素保留3D转换(transform-style: preserve-3d;)什么意思呢,就是让两个元素可以保持相对的立体空间效果。比如,土星图片和卫星轨道平面是垂直的,需要用这个属性来保持这个的空间效果。
 
技术图片
完整的立体旋转效果

[源码(https://github.com/a597873885/webfunny_admin/blob/master/src/modules/animateList/index.js)

 

以上是关于Css3动画 如何画3D旋转效果或者卫星围绕旋转效果的主要内容,如果未能解决你的问题,请参考以下文章

CSS3动画之3D旋转

学CSS3的3D动画 ——3D旋转—— 妙味课堂

CSS3——3D旋转图(跑马灯效果图)

html5如何让图片3d旋转?

CSS3进阶酷炫的3D旋转透视

CSS3进阶:酷炫的3D旋转透视