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 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 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
探讨如何把session存入数据库
2013/06/07 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
初识ThinkPHP控制器
2016/04/07 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python根据区号生成手机号码的方法
2015/07/08 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python单链表简单实现代码
2016/04/27 Python
python中redis的安装和使用
2016/12/04 Python
Python 处理数据的实例详解
2017/08/10 Python
Python 多进程和数据传递的理解
2017/10/09 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
2014幼儿园小班工作总结
2014/11/10 职场文书
学术研讨会主持词
2015/07/04 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫