一、css3新增的长度单位vw、vh
关于css3新增的vw、vh长度单位，它们分别代表什么意思呢？
我们知道css3的vw和vh从定义上分别是：
vw——相对于视窗的宽度：视窗宽度是100vw
vh——相对于视窗的高度：视窗高度是100vh

那么这里的视窗宽度究竟是指什么宽度呢？浏览器内部可视宽度？浏览器宽度？下面我们通过具体demo来看一下 

<div class="box">浏览器的宽度为：<span id="outer-width"></span>px</div>
<div class="box">浏览器窗口的内部宽度：<span id="inner-width"></span>px</div>
<div id="vw-box">10vw的宽度：<span id="vw-width"></span>px</div>
css: 
#vw-box{ 
	width: 10vw; 
	height: 50px; 
	background: #0CBA9F; 
	margin:0 auto;
}

js: 

function showWidth(){
   	var outer=document.getElementById("outer-width"),
	    inner=document.getElementById("inner-width"),
	    vww=document.getElementById("vw-width");

       outer.innerHTML=window.outerWidth;
       inner.innerHTML=window.innerWidth;

       var vw_div=document.getElementById("vw-box");
       vww.innerHTML=parseFloat(window.getComputedStyle(vw_div).width);
}
showWidth();   
window.onresize=function(){
   showWidth()
}
效果：
浏览器的宽度为：px
浏览器窗口的内部宽度：px
10vw的宽度：px

缩小浏览器窗口可以更清楚看到效果，从上面demo可以知道，10vw差不多刚好为浏览器窗口的内部宽度的十分之一，从而可知。“相对于视窗宽度”所指为浏览器窗口的内部可视区域大小。

二、css3新增的角度单位deg、grad、rad、turn

1、deg——角度（Degress）,这个就不用说大家都知道，一个圆共360度
2、grad——梯度（grads），一个圆共400梯度，100grad相当于90deg
3、rad——弧度（radians），这个想必大家也知道，一个圆共2π弧度，1.5707963rad相当于90deg。
4、turn——圈数（turns），这个就是圈的意思，一个圆共1圈。

下面我们来看一下demo

1、deg 

.ui-demo{ 
	width: 100px; 
	height: 50px; 
	background:#0CBA9F; 
	margin-bottom: 30px;
}
.ui-deg{ 
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
效果：



2、grad 

.ui-grad{ 
	-webkit-transform: rotate(100grad);
    transform: rotate(100grad);
}
效果：


 3、rad 

.ui-rad{ 
   -webkit-transform: rotate(1.5707963rad);
    transform: rotate(1.5707963rad);
}
效果：


4、下面重点来看下turn的例子：

原图：

 我们给ui-turn加上animation动画看看，从0deg到1turn的rotate，效果如下所示
<div class=”ui-turn”></div>
css: 

.ui-turn {
    width: 80px;
    height: 80px;
    background-image: url(turns.png);
    background-size: 80px 80px;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: rounds 1s linear 0s infinite;
    animation: rounds 1s linear 0s infinite
}
@-webkit-keyframes rounds {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(1turn)
    }
}
@keyframes rounds {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(1turn)
    }
}
效果：