- transfrom
- transform-origin
- perspective
- perspective-origin
- transform-style
- 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(x2+y2+z2);
var θ=Math.atan(√x2+y2/z)
var φ=Math.atan(y/x)
-----------
- 向量是有大小有方向的量
- 向量的模,指的是向量的大小
模=√x2+y2+z2
- 单位向量指的是模等于1的向量
x=x轴向量/模 y=y轴向量/模 z=z轴向量/模
-
css3 rotate3d(x,y,z,角度)
- x,y,z分别指的是 各个轴的单位向量
- 角度指的是旋转的角度
-
角度和弧度的转换公式
角度=弧度180/PI 弧度=角度PI/180
- sin\cos\tan\
- asin\acos\atan\atan2
- 只接收弧度作为参数
- Math.atan2(y,x) 用于精确计算各象限的角度
- 在css3 之前 ,浏览器里面所有的动画都是即时完成的
节省资源
animate({属性:最终值},5000,ease,function(){}) - 在css3多个一个变换的选择,默认还是即时完成,添加过渡特性(transition)
- 如果想让一个元素的应用过渡特性,
- 要给改元素 添加 transition 属性
- 给transition 至少添加两个属性
transition-property transition-duration - 还有一个属性指定动画的方式
transition-timing-functionlinear ease ease-in ease-out ease-in-out cubic-bezier - 还有一个属性指定过渡等待的时间
transition-delay - 通过 webkitTransitionEnd 事件 监听过渡完成的状态