/3d

Primary LanguageHTML

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²
  1. 单位向量指的是模等于1的向量
   x=x轴向量/模
   y=y轴向量/模
   z=z轴向量/模
  1. css3 rotate3d(x,y,z,角度)

    • x,y,z分别指的是 各个轴的单位向量
    • 角度指的是旋转的角度
  2. 角度和弧度的转换公式

    角度=弧度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 事件 监听过渡完成的状态