css3的图形3d翻转效果应用示例
摘要：css3的图形3d翻转效果应用示例代码如下:css33drotatebody,div,ul,li{padding:0;margin:0;}....
css3的图形3d翻转效果应用示例
代码如下:
<!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>
【css3的图形3d翻转效果应用示例】相关文章：
上一篇：
怎样用CSS实现大背景网页效果
相关阅读
网友关注
网友最新关注视频
- 第五单元 民族艺术的瑰宝_16. 形形色色的民族乐器_第一课时(岭南版六年级上册)_T3751175
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案，辽宁省
- 【部编】人教版语文七年级下册《过松源晨炊漆公店（其五）》优质课教学视频+PPT课件+教案，辽宁省
- 北师大版数学四年级下册3.4包装
- 沪教版牛津小学英语（深圳用） 六年级下册 Unit 7
- 冀教版小学英语四年级下册Lesson2授课视频
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案，辽宁省
- 人教版二年级下册数学
- 外研版英语七年级下册module3 unit2第二课时
- 19 爱护鸟类_第一课时(二等奖)(桂美版二年级下册)_T3763925
精品推荐
分类导航