您的位置：首页 > Web前端 > CSS

css3制作3d翻转效果

2016-03-29 16:40 686 查看

利用3d翻转效果可以有效的节省页面的空间，并且还可以替代单项选择，提高用户体验性。

效果展示

场景描述：

在案例中用户在

预期收益率

和

利息

之间只能选择其中一种并且录入数据。因为两者之间存在同类性并且表现出单选要求，我决定把两者放在一起，因为利息是之后新加的数据字段，之前的页面排版不太好再放一个div块来控制，于是我采用3d翻转来代替单选并达到需求设计。

实现原理

将2个选着内容单独写好排版，绝对定位于同一个相对定位的父容器中，一个在前，一个在后，在前面的表示选中，在后面表示未选中。如果要默认选择之一就默认放在前面。

源码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<style type="text/css">
.three-d {
position: relative;
}
.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
width: 100%;
}
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
}
.front, .back {
position: absolute;
}

.caption2 {
background-color: rgba(250,250,250,0.5);
height: 18px;
line-height: 100%;
color: white;
cursor: pointer;
text-align: center;
margin-top: 1px;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
transform: translateY(100%);
}
#changeshouyi:hover .caption2 {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
</style>
</head>
<body>
<ul style="list-style: outside none none;">
<li class="three-d" style="padding-left: 25%;">
<div style="height: 100px; display: flex; width: 90%">
<span style="transform: translateZ(-25px) rotateX(0deg);" aria-hidden="true" class="three-d-box">
<span class="front">
<div style="height: 100px; display: flex; width: 700px;">
<div style="float: left; height: 100%; flex: 7 1 0%; background-color: rgb(242, 242, 242); width: 400px;">
<div style="margin: 3%;">
可爱的小周周
</div>
</div>
<div id="changeshouyi" style="background-color: rgb(5, 175, 231); float: left; line-height: 50px; flex: 3 1 0%; overflow: hidden; width: 300px;">
<div style="color: white; text-align: center">收益率(%)</div>
<div style="text-align: center; height: 30%">
</div>
<div onclick="$('.three-d-box').css('transform','translateZ(-25px) rotateX(90deg)');$('#syorlx').val('lx')" class="caption2">选择利息
</div>
</div>
</div>
</span>
<span class="back">
<div style="height: 100px; display: flex; width: 700px;">
<div style="float: left; height: 100%; flex: 7; background-color: #F2F2F2">
<div style="width: 95%; height: 80%; margin: 3%">
hello ，majormayer。hello ， word ！
</div>
</div>
<div id="changeshouyi" style="background-color: #05AFE7; float: left; line-height: 50px; flex: 3; overflow: hidden;">
<div style="color: white; text-align: center">利 息(%)</div>
<div style="text-align: center; height: 30%">
</div>
<div onclick="$('.three-d-box').css('transform','translateZ(-25px) rotateX(0deg)');$('#syorlx').val('sy')" class="caption2">选择收益率
</div>
</div>
</div>
</span>
</span>
</div>
</li>
</ul>
</body>
</html>

transform-style: preserve-3d;

声明使用css3-3d效果

.front {transform: rotatex(0deg) translatez(25px);}

frot是在前面的块，点击翻转后即时回到0度

.back {transform: rotatex(-90deg) translatez(25px);}

back则是向后90度

.front, .back {position: absolute;}

父容器设置了相对定位，里面必须设置绝对定位

translatez(25px);

是立体偏移量，数值越大3d效果就越明显

.caption2 {

background-color: rgba(250,250,250,0.5);

height: 18px;

line-height: 100%;

color: white;

cursor: pointer;

text-align: center;

margin-top: 1px;

-webkit-transition: -webkit-transform 0.3s ease-in-out;

-moz-transition: -moz-transform 0.3s ease-in-out;

transition: transform 0.3s ease-in-out;

-webkit-transform: translateY(100%);

-moz-transform: translateY(100%);

transform: translateY(100%);

}

#changeshouyi:hover .caption2 {

-webkit-transform: translateY(0);

-moz-transform: translateY(0);

transform: translateY(0);

}

是鼠标悬浮将隐藏的按钮上浮以点击触发翻转动画。

源码下载：

http://pan.baidu.com/s/1jIHAtN4

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航