一个盒子里面装两个同宽高的盒子，利用backface-visibility设置元素背面是否可见的属性，达到两面翻转的效果
以下是引用片段：#imgmenu{
width: 450px
height: 25px/*高度是背景图片的一半*/
background: url(/imagelist/06/43/473648jpj0j1.gif)
list-style-type: none
padding: 0px
margin: 0px
}
#imgmenu li{
float: left
}
#imgmenu li a{
display: block
width: 90px
height: 25px
}
#imgmenu li#home a:hover,#activeh{
background: url(/imagelist/06/43/473648jpj0j1.gif) 0 -25px
/*翻转时背景图的位置，左边0px，顶部-25px,
背景图的下半部分，下同*/
}
#imgmenu li#about a:hover,#activea{
background: url(/imagelist/06/43/473648jpj0j1.gif) -90px -25px
/*第二个菜单的位置距左边90px，
每个菜单的宽度是90px*/
}
#imgmenu li#pro a:hover,#activep{
background: url(/imagelist/06/43/473648jpj0j1.gif) -180px -25px
}
#imgmenu li#faq a:hover,#activef{
background: url(/imagelist/06/43/473648jpj0j1.gif) -270px -25px
}
#imgmenu li#contact a:hover,#activec{
background: url(/imagelist/06/43/473648jpj0j1.gif) -360px -25px
}
css可以通过perspective属性来实现。ps可以直接通过滤镜中的翻转效果实现。对于ps，首先打开Photoshop，导入需要编辑的图片，用选取工具选定图片，在工具栏中打开滤镜效果，选择反转效果即可。对于css，css实现翻转效果的方法，首先创建一个演示方块，并为其添加transition和transform属性，然后将transition属性添加到需要翻转的p上，最后添加perspective和transform-style属性即可。
