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)

原文地址:https://www.cnblogs.com/warm-stranger/p/10939789.html

时间: 2024-10-28 18:16:12

Css3动画(一) 如何画3D旋转效果或者卫星围绕旋转效果的相关文章

CSS3动画结合js实现3D轮播

昨天晚上有个同行提出要做一个旋转式的3D轮播图(下面统称banner图).我就为了帮他看了一下相关的技术贴发现符合要求的很少,所以只能自己去动手写了.看到有人写了CSS3立体旋转动画的博客,我就想把这个动画拆分成几个模块来做一个banner效果可不可以?最后自己动手写了一下还是可以的.不过这个banner效果还是存在一些bug,因为不是急用所以我也没有修复.以后有空我会修复的. html部分代码 <div class="container"> <div class=&

css3动画与2D、3D之间的转换

应用css3中的transition(过渡动画).@keyframes(关键帧动画).transform(2D.3D转换)可以实现一些小的动画效果. 一.transition—过渡动画 <!DOCTYPE html> <html><head> <title>基本图像的放大缩小</title> <meta charset="utf-8"> <style type="text/css">

css3动画效果:3 3D动画

立方体旋转动画效果 css 1 #container{ 2 width: 400px; 3 height: 400px; 4 -webkit-perspective:800; 5 perspective:800; 6 -webkit-perspective-origin:50% 225px; 7 perspective-origin:50% 225px; 8 9 } 10 #stage{ 11 width: 300px; 12 height:300px; 13 14 -webkit-transi

CSS3动画与2D、3D转换

一.过度动画:transition 五个属性: transition-property css 样式属性名称 transition-duration 动画持续时间(需要单位s) transition-timing-function 动画效果函数名称 linear.ease.ease-in.ease-out. ease-in-out.cubic-bezier(n,n,n,n) transition-delay 延迟执行动画的时间 animation-play-state:paused;暂停动画执行

用css3画3d动画的思路

最近试了下CSS3动画,现在通过一个例子简单讲一讲我用css3画3d视图的思路. 任何时候敲代码前都要想清楚我要干什么,我要敲一个简单的3d旋转画册. 一. 1.首先用一个总容器包含所有的图片,设定属性perspective: 1000px,表示他距离我们屏幕1000px的距离,从二维变成了三维 2.要使用3d旋转,必先要有一个参考系使所有图片围绕他旋转,在总容器里面加一个div,添加属性transform-style: preserve-3d就可以变成参考系. 3.然后在这个div里设置动画效

使用 CSS3 动画实现的 3D 图片过渡特效

这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 效果演示      插件下载 您可能感兴趣的相关文章 网站开发中很有用的 j

HTML5 CSS3 诱人的实例: 3D立方体旋转动画DEMO

创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的例子,感觉很不错,不过实在想不出来实际的用处,但是效果很炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景,即面上的小格格 3. @-webkit-keyframes 实现动画 HTML: <body> <div class="stage"> &l

如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective:用来实现一个3d的场景 写3D效果的第一步是要创建一个3D场景,即索要实现效果的模块.这里用到了 perspective 属性和 perspective-origin 属性. perspective:用来定义3d动画距离浏览器的距离,单位是(px). perspective-origin:效果渲染的视角

css3动画由浅入深总结

回到顶部 一:过渡动画---Transitions 一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性的使用方法如下所示: transition: property | duration  | timing-function | delay transition-property: 表示对那个属性进行平滑过渡. transition-duratio