关键词： opacity（透明度） ，   transform:translateZ（往屏幕中心移动） 

                                            星球大战

星球大战开场

原理：transform:translateZ   ,向X轴移动无限大，可以理解为消失。搭配animation动画，即可实现。

1.   <div class="starwars-demo"></div>   <!--star 和wars两个字 -->

.statwars-demo这个盒子即包含着star 和 wars 两个字 。

现在他们有以下的属性：.statwars-demo{ height:17em; width:34em} 

换算成px即，height:17*16px ; width:34*16px;  

因为本身没有定义字体大小，使用默认浏览器大小为16px，继承父元素的属性，所以高宽应该是上面的。

2. opacity（0---1)

img.opacity1 { opacity:0.25;}

img.opacity2 { opacity:0.50;}

img.opacity3 { opacity:0.75;}   =>

透明度

元素透明度为0，完全透明，看不见。

元素透明度为1，完全不透明。

可以理解为玻璃，玻璃完全透明，所以看不见玻璃本身。玻璃完全不透明，所以看得见玻璃很脏。

3. transform: translateZ(-400em);  //朝着x轴方向移动400em,即400*16=6400px ,可以理解为完全消失。

备注：此文章根据实例总结而来，访问更多请点我的github