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线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
CSS的calc函数用法小结
Jun 25 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
输出控制类
2006/10/09 PHP
php中取得文件的后缀名?
2012/02/20 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
更优雅的事件触发兼容
2011/10/24 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
大学生毕业自荐信
2013/10/10 职场文书
办公室保洁员岗位职责
2013/12/02 职场文书
骨干教师培训制度
2014/01/13 职场文书
市场部管理制度
2014/02/02 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
安全例会汇报材料
2014/08/23 职场文书
销售员试用期自我评价
2014/09/15 职场文书
街道社区活动报告
2015/02/05 职场文书
医学生自荐信范文
2015/03/05 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers