css3动画垂直翻转180度

html代码

<ul class="flatflipbuttons"><li><a href="http://www.w2bc.com" title="Search"><span class="icon-search"></span></a><b>Search</b></li><li><a href="http://www.w2bc.com"><span class="icon-gears"></span></a><b>Gears</b></li><li><a href="http://www.w2bc.com"><span class="icon-rss"></span></a><b>RSS</b></li><li><a href="http://www.w2bc.com"><span class="icon-twitter"></span></a><b>Twitter</b></li><li><a href="http://www.w2bc.com"><span class="icon-rocket"></span></a><b>Rocket</b></li></ul><br /><br /><ul class="flatflipbuttons second"><li><a href="http://www.w2bc.com"><span><img src="imgs/rss-heart.png" /></span></a></li><li><a href="http://www.w2bc.com"><span><img src="imgs/twitter-heart.png" /></span></a></li><li><a href="http://www.w2bc.com"><span><img src="imgs/facebook-heart.png" /></span></a></li><li><a href="http://www.w2bc.com"><span><img src="imgs/google-heart.png" /></span></a></li><li><a href="http://www.w2bc.com"><span><img src="imgs/stumble-heart.png" /></span></a></li></ul>

css

ul.flatflipbuttons{margin: 0;padding: 0;list-style: none;-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */-moz-perspective: 10000px;perspective: 10000px;}ul.flatflipbuttons li{margin: 0;display: inline-block;width: 100px; /* dimensions of buttons. */height: 100px;margin-right: 15px; /* spacing between buttons */background: white;text-transform: uppercase;text-align: center;}ul.flatflipbuttons li a{display: table;font: bold 36px Arial; /* font size, pertains to icon fonts specifically */width: 100%;height: 100%;margin-bottom: 4px;color: black;background: #3B9DD5;text-decoration: none;outline: none;-webkit-transition: all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */-moz-transition: all 300ms ease-out;transition: all 300ms ease-out;}ul.flatflipbuttons li:nth-of-type(1) a{color: white;background: #3B9DD5;}ul.flatflipbuttons li:nth-of-type(2) a{background: #A1CD3A;}ul.flatflipbuttons li:nth-of-type(3) a{background: #80C5EC;}ul.flatflipbuttons li:nth-of-type(4) a{color: white;background: #635746;}ul.flatflipbuttons li:nth-of-type(5) a{background: #F2C96D;}ul.flatflipbuttons li a span{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;display: table-cell;vertical-align: middle;width: 100%;height: 100%;-webkit-transition: all 300ms ease-out; /* CSS3 transition. */-moz-transition: all 300ms ease-out;transition: all 300ms ease-out;}ul.flatflipbuttons li b{/* CSS for text beneath button */display: block;position: relative;width: 100%;opacity: 0;-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */-moz-transition: all 300ms ease-out 0.2s;transition: all 300ms ease-out 0.2s;}ul.flatflipbuttons li a img{/* CSS for image if defined inside button */border-width: 0;vertical-align: middle;}ul.flatflipbuttons li:hover a{-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/-moz-transform: rotateY(180deg);transform: rotateY(180deg);background: #c1e4ec; /* bgcolor of button onMouseover*/-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;transition-delay: 0.2s;}ul.flatflipbuttons li:hover a span{color: black; /* color of icon font onMouseover */-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/transform: rotateY(180deg);-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;transition-delay: 0.2s;}ul.flatflipbuttons li:hover b{opacity: 1;}/* CSS for 2nd menu below specifically */ul.second li a{background: #eee !important;}ul.second li a:hover{background: #ddd !important;}

css3动画垂直翻转180度相关推荐

css3动画旋转360度,CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例...
CSS3旋转动画(360度旋转.旋转放大.放大.移动) 用法和实例 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explo ...
css3动画旋转360度,CSS3动画（360度旋转、旋转放大、放大、移动）
Title div{ width:120px; height:120px; line-height:120px; margin: 20px; background-color: #5cb85c; fl ...
linux桌面旋转了180度,[多图]回顾每一款默认Ubuntu壁纸
每个默认的Ubuntu壁纸Ubuntu 4.10'Warty Warthog' 当人们抱怨Ubuntu发行版中的" 褐色 "时,我经常想回到Ubuntu的第一张墙纸,以便他们的意见 ...
CSS3动画详解（图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言本文主要内容: 过渡:transition 2D 转换 trans ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
用css动态实现圆环百分比分配——初探css3动画
最近的小程序项目有个设计图要求做一个圆环,两种颜色分配,分别代表可用金额和冻结金额.要是就直接这么显示,感觉好像挺没水平??于是我决定做个动态! 在mdn把新特性gradients(渐变).trans ...
css3动画详解 ——复习（笔记）
本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation 过渡:transition transition的中文含义是过渡. ...
【转载】CSS3动画图文教程
这段时间在学习CSS3的动画,觉得特别有趣,在刷博客的时候看到有个文章写得很详细,于是转载一下~ 感谢原创作者 https://www.cnblogs.com/qianguyihao/p/843518 ...

css3动画垂直翻转180度

css3动画垂直翻转180度相关推荐

最新文章

热门文章