css3动态练习

前端小专题练习

开发工具与关键技术：DW
作者：熊琪
撰写时间：2019年1月18日

图1 图片样式浏览图：

如图是一个动态导航效果，当你鼠标移入是导航标题向后翻滚;
实现其效果并不难，运用到的技术是css3，不需要用到js来完成那么我们看下其样式的布局是怎么写的。
如图布局代码：

首先我们得设置导航在当前状态与悬浮状态下的背景效果
代码截图：

这里设置了五个导航按钮，所以要分别设置其当前状态与悬浮状态的背景颜色这样才能达到翻滚的同时背景颜色不发生改变。在这hover是我们实现动态样式的主要部分：
通过hover实现效果代码截图：

实现的是立体翻滚的效果那么就要用代码写成3D样式，
代码截图为：

实现3D翻转导航效果截图;

                                                    （请各位江湖前辈赐教）