演示地址

点击打开链接

注意:菜单翻转效果在搜狗浏览器上看不出来。推荐用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. codeforces 333B - Chips

    注意:横向纵向交叉时,只要两条边不是正中的边(当n&1!=1),就可以余下两个chip. 代码里数组a[][]第二维下标 0表示横向边,1表示纵向边. #include<stdio.h& ...

  2. Svn正确的使用方法

    想必大家现在都比较喜欢使用svn(subversion)完成代码管理了,因为它的开源,轻巧,易用.但是这样一个宝贝如果不知道其正确的用法,也会让我们百思不得其解,甚至耽误项目进度,浪费程序员的心血和结 ...

  3. Spring学习之基本概念

    Spring 基本概念 Spring优点: 1.Spring不同于其它的Framework,它要提供的是一种管理你的业务对象的方法. 2.DI有效的降低了耦合度 3.AOP提供了通用任务的集中管理 4 ...

  4. Android 如何直播RTMP流

    在android上,视频/音频流直播是极少有人关注的一部分.每当我们讨论流媒体,RTMP(Real Time Messaging Protocol)是不可或缺的.RTMP是一个基本的视频/音频直播流协 ...

  5. delphi 注册 dcc70.dll

    @echo 开始注册copy dcc70.dll %windir%\system32\regsvr32 %windir%\system32\dcc70.dll /s@echo dcc70.dll注册成 ...

  6. Android 工程目录结构简介

    一般来说,一个Android工程的目录结构如下图所示. 1:src JAVA源代码都放在这里面. 2:gen 编译器自动生成的一些JAVA代码 3:Android 4.2 Android平台(本工程用 ...

  7. 对Spring IoC容器实现的结构分析

    本文的目标:从实现的角度来认识SpringIoC容器. 观察的角度:从外部接口,内部实现,组成部分,执行过程四个方面来认识SpringIoC容器. 本文的风格:首先列出SpringIoC的外部接口及内 ...

  8. PIG的配置

    Pig是一个客户端应用程序,就算你要在Hadoop集群上运行Pig,也不需要在集群上装额外的东西.Pig的配置非常简单: 1.下载pig,网址http://pig.apache.org/ 2.在机器上 ...

  9. ADO.NET访问SQL Server调用存储过程带回参

    1,ADO.NET访问SQL Server调用存储过程带回参 2,DatabaseDesign  use northwind go --存储过程1 --插入一条商品 productname=芹菜 un ...

  10. 炮兵阵地（POJ 1185状压dp）

    题意:n*m地图'H'能放'p'不能放,布兵的方格上下左右不能布兵,给你地图求最大布兵数 分析:关系到前两行,所以dp[i][j][k]第i行状态为j,i-1行状态为k时的最大布兵数, 先求出所有可行 ...