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实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
Yii框架form表单用法实例
2014/12/04 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
BootStrap的双日历时间控件使用
2017/07/25 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
浅析Python中字符串的intern机制
2020/10/03 Python
Python模块常用四种安装方式
2020/10/20 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
Java面试笔试题大全
2016/11/23 面试题
前台接待的工作职责
2013/11/21 职场文书
教师旷工检讨书
2014/01/18 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
承诺书模板
2014/08/30 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
高三语文复习计划
2015/01/19 职场文书
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript