# for  i in  {20200601..20200624} ; do ./yiic statvisitors stat --date=$i; done;

font-family: proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;


font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;

要使用嵌套一个div实现

<div class="block">
    <div class="block-in"></div>
</div>

外层要加上 transform-style 和 perspective （视距）才能实现里层的元素3D效果

.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
  /* 3D变形 */
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
  
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

如果需要实现在翻转后看到背面的元素，还需要将两个元素放到block-in元素里面，使两层重叠，在上面一层元素 上使用 backface-visibility: hidden 属性，使之在翻转后不面向屏幕时隐藏起来；并在里面的元素同时使用 transition: transform .5s; transform: rotateY(0deg); 动画

<div class="block">
    <div class="block-in">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</div>

CSS提示：
翻转前：
box1:transition: transform .5s; transform: rotateY(0deg);
box2:transition: transform .5s; transform: rotateY(0deg); backface-visibility:hidden;

翻转后(box2翻转到90度以后就会隐藏掉，只显示box1了)：
box1:transition: transform: rotateY(180deg);
box2:transition: transform: rotateY(180deg);

Autoprefixer是一个后处理程序，你可以同Sass，Stylus或LESS等预处理器共通使用。它适用于普通的CSS，而你无需关心要为哪些浏览器加前缀，只需全新关注于实现，并使用W3C最新的规范。配合postcss一起使用后更好.
安装 : npm install postcss autoprefixer

var autoprefixer = require('autoprefixer');
module.exports = {
    module: {
      loaders: [
        { test: /\.css$/, loader: "style!css!postcss" },
        { test: /\.scss$/, loader: "style!css!postcss!sass" }
      ]
    },
    postcss: [ autoprefixer({ browsers: ['last 2 versions'] })
]}

注： 另外webpack还有一个autoprefixer-loader，但npm官网已将其标为【deprecated】，推荐使用上面示例中通过postcss-loader的方式使用autoprefixer。

const autoprefixer=require("autoprefixer")
postcss:[require('autoprefixer')({
   browsers: [
     'last 10 Chrome versions',
     'last 5 Firefox versions',
     'Safari >= 6', 
     'ie> 8
   ] 
})]

然后，为了兼容大多数主流机型，在package.json里面找到 browserslist ，加上
"iOS >= 8","Firefox >= 20","Android > 4.4"

文档：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsList

HTMLMediaElement接口的controlsList 属性返回DOMTokenList，帮助用户在显示其自己的控件集时选择要在媒体元素上显示的控件。DOMTokenList可以设置以下三个可能值中的一个或多个：nodownload，nofullscreen和noremoteplayback（值是一组无序的空格分隔标记，这些标记是ASCII不区分大小写的）。

nodownload关键字暗示的下载控制应使用用户代理自己的一套媒体元素控件时被隐藏。
nofullscreen关键字暗示在使用用户代理自己的媒体元素控件集时，应隐藏全屏模式控件。
noremoteplayback关键字暗示当使用用户代理自己的媒体元素控件集时，应隐藏远程播放控件。
语法
var domTokenList = HTMLMediaElement.controlsList;
Value
A DOMTokenList.

示例

<video controls controlslist="nodownload" id="video" src=""></video>
<video controls controlslist="nodownload nofullscreen noremoteplayback" id="video" src=""></video>

规格

https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist.