beibeilove/3d

3d转换#

3d转换属性##

1. transfrom
2. transform-origin
3. perspective
4. perspective-origin
5. transform-style
6. backface-visibility

---

极坐标和直角坐标系转换公式#

极坐标转直角坐标##

θ 代表天顶角 theta

φ 代表方位角  phi

var x=radius*Math.sin(θ)Math.cos(φ); var z=radiusMath.sin(θ)Math.sin(φ); var y=radiusMath.cos(θ);

直角坐标转极坐标

var r=Math.sqrt(x²+y²+z²); var θ=Math.atan(√x²+y²/z) var φ=Math.atan(y/x) -----------

向量的概念

1. 向量是有大小有方向的量
2. 向量的模,指的是向量的大小

  模=√x²+y²+z²

3. 单位向量指的是模等于1的向量

   x=x轴向量/模
   y=y轴向量/模
   z=z轴向量/模

4. css3 rotate3d(x,y,z,角度)

   • x,y,z分别指的是 各个轴的单位向量
   • 角度指的是旋转的角度

5. 角度和弧度的转换公式

   角度=弧度180/PI 弧度=角度PI/180

---

javascript 三角函数

1. sin\cos\tan\
2. asin\acos\atan\atan2
3. 只接收弧度作为参数
4. Math.atan2(y,x) 用于精确计算各象限的角度

---

transition

1. 在css3 之前 ,浏览器里面所有的动画都是即时完成的 节省资源

   animate({属性:最终值},5000,ease,function(){})
   

2. 在css3多个一个变换的选择,默认还是即时完成,添加过渡特性(transition)
3. 如果想让一个元素的应用过渡特性,
   • 要给改元素 添加 transition 属性
   • 给transition 至少添加两个属性 transition-property transition-duration
   • 还有一个属性指定动画的方式 transition-timing-function linear ease ease-in ease-out ease-in-out cubic-bezier
   • 还有一个属性指定过渡等待的时间 transition-delay
   • 通过 webkitTransitionEnd 事件 监听过渡完成的状态