css3制作3d翻转效果

来源：互联网发布：apache phpinfo 编辑：程序博客网时间：2024/06/10 04:53

利用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

1 0