如何使用CSS3来创建一个3D的动画效果？

Posted 2023-04-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用CSS3来创建一个3D的动画效果？相关的知识，希望对你有一定的参考价值。

参考技术A 主要是用CSS3里的animation和translate3d来做的。

给你找了个例子，方便理解：http://www.cnblogs.com/axes/p/3520299.html 参考技术B 要有JS控制才行

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），图形的角度处理