• 某些代码中经常出现双！！的情况，这是因为！运算符首先将其操作数转换为布尔值，然后对其求反，也就是!总是返回true或者false，两次!!就可以得到一个等价的布尔值
• &&的短路 ，两边表达式都为真，返回一个真值，有一个为假返回一个假值，在js中任何希望使用布尔值的地方，表达式或语句都会将其当做真值或假值对待，因此实际&&并不总是返回true or false，但也并无大碍。此运算符返回值是先计算左侧表达式的值，如果为假返回左侧表达式的值并不计算右侧的值，如果左侧为真则计算右侧表达式的值并返回右侧的值作为整个表达式的结果。因此有时可以替代if语句，如：if(a==b) stop();等价于 (a==b)&&stop();
• 使用transition过度的时候，注意如果使用了display属性block和none之间的变化，那么过度将无效，会直接出现到最后设定的样式！
• css3属性-webkit-font-smoothing 抗锯齿使页面更清晰
• pointer-events 设置或检索在何时成为属性事件的target。 none:元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。 对应的脚本特性为pointerEvents。

使用css3的3d动画效果注意点

• 使用css33d动画效果，translate3d,对于Z轴使用需要注意两个重要的属性，一个是transform-style:preserve-3d,让子元素保留其3d位置，另外一个是perspective:number(自带单位px)，景深，即元素离视图的距离，可以把元素的初始位置看作是0，而我们屏幕的位置就是设定的这个值，控制translateZ()的值就是在控制这个元素离我们屏幕的值，因此translateZ()的值始终小于设定的perspective的值，如果为负就表示离初始0的位置越来越远，另外移动的Z轴其实应该是在父元素中心点，我们可以看作是把这个父元素中的一个子元素垂直的向上拿，就如同把桌面上的一个物体垂直的往上拿一样，如果这个物体在桌面的中心，我们的视点在中心，物体就感觉宽度高度等倍增大；
  如果物体不在中心，我们的视点不变，物体感觉在X或者Y轴上也会有变动，其实并没有变，因为视点的原因，这也是说为什么看见的不一定是真实的吧。
  特别重要的一点是如果要想使用3D立体效果，第一个注意父元素要设置perspective，这样子元素才能使用translateZ，且子元素display:block/inline-block;
  因此营造一个立方体旋转的效果，首先给一个父元素设置一个perspective，例如 ul li span吧
  ul设置perspective，此时li才能使用translateZ，设置其为负值例如-50px，此时相当于离开始位置0离我们远离了50px,然后设置perspective（防止这个属性不能继承）,这是li元素的子元素span也可以设置translateZ了，设置为50px，抵消之前的设置让其挪动回来，注意ul li同时设置perserve-3d，最后动画添加给li元素，rotateX(),X轴其实还在li上，但是span已经移动到另一个平面，这样旋转起来就如同一个立方体一样。
  最后一个小细节，rotateX（90deg）<正是向上，负时向下>后离X轴的垂直距离其实就是perspctive的绝对值，因此如果想要效果平滑，看起来像立方体在围绕自身X轴旋转的话perspective的值就要设置成这个旋转立方体的高度的一半，这里就是这个li元素的高度的一半，此时看起来就比较平滑。
  最后注意使用transform的时候，如果有动画触发，尽管不想要设置的变动，有必须把相同的值设置在触发的动画或者hover/focus中，例如设置了transform:translateZ(-200px),,如果动画只是想让元素旋转，那么必须在设置旋转的同时设置这个translateZ的值，且值和上面的值一样。