话不多说，先上效果截图，当吧鼠标移动上去就会产生打开盒子的动画
代码如下：
<!DOCTYPE html><html><head><title>open_box</title><style> #zong{ margin:100px auto; width:300px; height:300px; position:relative; } #face1,#face2{ width:300px; height:300px; background:url(face1.png) no-repeat; position:absolute; top:0px; left:0px; border:1px solid gray; border-radius:50%; } #face2{ background:url(face2.png) no-repeat; transform-origin:bottom; transition:all 2s; } #zong:hover #face2{ transform:rotatex(180deg); }</style></head><body> <div id="zong"> <div id="face1"> </div> <div id="face2"> </div> </div></body></html>
效果如下，如果看不到可以用ie打开http://123.207.136.94/openbox.html查看，记得用ie高版本
原标题：css特效之openbox
关键词：CSS
我知道了 