css3的图形3d翻转效果应用示例


Posted in HTML / CSS onApril 08, 2014

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>css3 3d rotate</title>
<style type="text/css">
body,div,ul,li{
padding:0;
margin:0;
}
.container ul li {
height: 180px;
width: 180px;
margin-right: 20px;
margin-bottom: 20px;
display: inline;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
float: left;
}
.out_box{
position: relative;
height: 180px;
width: 180px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.out_box div{
display: block;
height: 180px;
width: 180px;
position: absolute;
left: 0;
top: 0;
background: #060;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
color:#FFF;
line-height:180px;
font-size:16px;
}
.out_box .front_box{
z-index: 2;
}
.out_box .back_box{
z-index: 1;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container ul li:hover .out_box{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container ul li:hover .back_box{
z-index: 3;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="out_box">
<div class="front_box">front</div>
<div class="back_box">back</div>
</div>
</li>
<li>
<div class="out_box">
<div class="front_box">front2</div>
<div class="back_box">back2</div>
</div>
</li>
<li>
<div class="out_box">
<div class="front_box">front3</div>
<div class="back_box">back3</div>
</div>
</li>
</ul>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 #HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 #HTML / CSS
使用css3制作登录表单的步骤
Apr 07 #HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 #HTML / CSS
CSS3网格的三个新特性详解
Apr 04 #HTML / CSS
CSS类名支持中文命名的示例
Apr 04 #HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 #HTML / CSS
You might like
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php中apc缓存使用示例
2013/12/25 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
在Python中实现贪婪排名算法的教程
2015/04/17 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
python让函数不返回结果的方法
2020/06/22 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
历史学专业推荐信
2013/11/06 职场文书
思想专业自荐信范文
2013/12/25 职场文书
大学生职业规划论文
2014/01/11 职场文书
医院节能减排方案
2014/06/13 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
小学优秀班主任材料
2014/12/17 职场文书
先进个人评语大全
2015/01/04 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫