演示地址

点击打开链接

注意:菜单翻转效果在搜狗浏览器上看不出来。推荐用FireFox

<!DOCTYPE   html   PUBLIC   "-//W3C//DTD XHTML 1.0 Strict//EN"
    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>

<html
 
xmlns
=
"http://www.w3.org/1999/xhtml"
>


<head>

<style
 
type
=
"text/css"
>


/
*
<
![CDATA[*
/

  
ul
.flipboard
  {
  margin:

;
  padding:

;
  list-style:none;
  perspective:10000px;
  }
  
ul
.flipboard 
li

  {
  display:inline-block;
  
width
:80px;
  
height
:80px;
  margin-right:10px;
  
background
:white;
  
font
:bold 36px Arial;
  text-transform:uppercase;
  text-align:
center
;
  cursor:pointer;
  }
  
ul
.flipboard 
li
 
a

  {
  display:block;
  
width
:

%;
  
height
:

%;
  
color
:black;
  text-decoration:none;
  outline:none;
  transitional:all 300ms ease-out

.1s;
  }
  
ul
.flipboard 
li
 
a
 
span

  {
  box-sizeing:border-box;
  padding-top:15px;
  display:block;
  
width
:

%;
  
height
:

%;
  transition:all 300ms ease-out

.1s;
  }
  
ul
.flipboard 
li
:hover 
a

  {
  transform:rotate(180deg);
  
background
:#cef1ff;
  border-radius:7px;
  box_shadow:

5px #eee inset;
  }
  
ul
.flipboard 
li
:hover 
a
 
span

  {
  transform:rotateY(180deg);
  }
  
/
*]]
>
*
/

  
</style>

<title></title>


</head>

<body>

  
<ul
 
class
=
"flipboard"
>

    
<li><a
 
href
=
"#"
><span>
k
</span></a></li>

<li><a
 
href
=
"#"
><span>
o
</span></a></li>

<li><a
 
href
=
"#"
><span>
k
</span></a></li>

<li><a
 
href
=
"#"
><span>
i
</span></a></li>

<li><a
 
href
=
"#"
><span>
n
</span></a></li>

<li><a
 
href
=
"#"
><span>
g
</span></a></li>

  
</ul>


</body>


</html>

CSS3实现翻转菜单效果的更多相关文章

  1. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  2. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

  3. CSS3实现3d菜单翻转

    transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...

  4. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. 纯CSS3实现的动感菜单效果

    1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...

  6. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

  7. 使用 jQuery & CSS3 实现翻转的作品集滑块

    作为 Web 开发人员,我想你一定见过各种各样的图片滑块效果.展示产品或者个人作品的方法有很多,其中之一是使用网格样式的滑块效果.在本教程中,我将分享如何使用 jQuery 和 CSS3 变换实现翻转 ...

  8. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  9. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

随机推荐

  1. HDU 4612 Warm up (边双连通分量+DP最长链)

    [题意]给定一个无向图,问在允许加一条边的情况下,最少的桥的个数 [思路]对图做一遍Tarjan找出桥,把双连通分量缩成一个点,这样原图就成了一棵树,树的每条边都是桥.然后在树中求最长链,这样在两端点 ...

  2. Java [Leetcode 328]Odd Even Linked List

    题目描述: Given a singly linked list, group all odd nodes together followed by the even nodes. Please no ...

  3. B树索引和位图索引的区别！

    B树索引主键和唯一性约束字段的B树索引,效率几乎和海量数据没有关系. 键值重复率低的字段比较适合使用B树索引. 位图索引键值重复率高的字段比较适合使用位图索引.count.and.or.in这些特定的 ...

  4. SharePoint 2010中列表Add和Delete事件解析

    转:http://winsystem.ctocio.com.cn/26/11400026_2.shtml [IT专家网独家撰稿]SharePoint 2010与以前的版本相比,天翻地覆的变化并不为过. ...

  5. Java之UncaughtExceptionHandler

    概述: UncaughtExceptionHandler是为了捕获没有被捕获的异常,包括运行时异常,执行错误(内存溢出等),子线程抛出的异常等,你可以在uncaughtException(xx)里对后 ...

  6. 判断DataSet是否有数据

    if (data1.Tables[0].Rows.Count>0)        {            MessageInfoText.Text = data1.Tables[0].Rows ...

  7. Druid连接池简单入门

    偶尔的机会解释Druid连接池,后起之秀,但是评价不错,另外由于是阿里淘宝使用过的所以还是蛮看好的. 1.jar包依赖--Druid依赖代码 <dependency> <groupI ...

  8. linux 安装jdk 配置tomcat

    Linux(ubuntu)下安装JDK.Tomcat 一.安装jdk 1)首先以root用户登录进去,在根目录下建立/usr/java的目录,我们将下载的东西都放到该目录下去. 2)参考的https: ...

  9. jenkins 命令行 CLI jenkins-cli.jar

    部署好jenkins后,一般都是通过jenkins提供的web界面来操作jenkins. 而有些场景则需要通过命令来操作jenkins,例如通过脚本操作jenkins. 在jenkins提供的web界 ...

  10. HDU 5607 graph（DP+矩阵乘法）

    [题目链接] http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=663&pid=1002 [题意] 给定一个有向 ...