↓↓选择一款你喜欢的背景皮肤吧!↓↓
{WEB前端技术分享,APP开发,PHP编程学习}
3D翻转效果:分正反面显示,点击切换,使用CSS3+jQuery实现!
完整源码如下:
<h3 style="text-align:center">css3 3d翻转效果</h3> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><style><!-- *{margin:0;padding:0;} body, td, input, textarea, select, button{color:#5f5f5f;/*font:12px/1.5 "Microsoft YaHei",Tahoma,Arial Geneva, sans-serif;*/} .demonstrate{width: 41%;padding: 20px;margin: 10px auto;border: 1px #bbb solid;border-radius: 5px;} .description h3{color:#f00;padding-bottom:8px;}d .description p{padding-bottom:5px;} .description strong{color:#080; border-bottom:1px dotted;} .description b{color:#7A7676;} .demo{ display: block; cursor: pointer; position: relative; width:190px;/*限定3d展示范围*/ height: 243px; /*-webkit-perspective: 200px;*/ border: 1px solid #f00; } .demo span{ display: block; /*指定该元素的具有3d翻转效果*/ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; /*指定元素3d反面是否可见*/ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out;} .demo .front{ -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); -ms-transform: rotateX(0deg) rotateY(0deg); -o-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } .demo .front.hover{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .demo .behind{ /*默认该层就是反面,并且不可见*/ position: absolute;left: 0;top: 0; display: table; cursor: text; width: 100%; height: 100%; background: #00a3cf; -webkit-transform: rotateX(0deg) rotateY(180deg); -moz-transform: rotateX(0deg) rotateY(180deg); -ms-transform: rotateX(0deg) rotateY(180deg); -o-transform: rotateX(0deg) rotateY(180deg); transform: rotateX(0deg) rotateY(180deg); display: none\9; } .demo .behind b{ color: #fff; display: table-cell;/*表格单元格显示:文字居中垂直显示*/ vertical-align: middle; } .demo .behind i{width: 100%;height: 35px;line-height: 35px;color: #900;cursor: pointer;font-style:normal;text-align: center;background: rgba(77,77,77,.5);position: absolute;left: 0;bottom: 0;} .demo .behind.hover{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } --></style><script type="text/javascript">// <![CDATA[ $(function() { $(".description").on("click", ".front,.behind i", function() { if (!$(".front").hasClass('hover')) { $(".front,.behind").addClass('hover'); } else { $(".front,.behind").removeClass('hover'); } // 针对ie做降级处理:直接显隐对应层 if($.browser.msie){ $(".front,.behind").fadeToggle(); } }); }) // ]]></script> <div class="demonstrate"> <div class="description"> <h2></h2> <div class="txt"></div> <div class="demo"><span class="front"><a class="fancy-link" href="https://www.phpvar.com/phpvar/wp-content/uploads/taylor_swift_03.jpg"><img title="点击查看详细信息!" alt="图片" src="https://www.phpvar.com/phpvar/wp-content/uploads/taylor_swift_03.jpg" width="190" height="243" /></a></span> <span class="behind"> <b><strong style="color: #f00;">我是反面,可放置重要信息! </strong><br/> 妹子详细信息!!妹子详细信息!!妹子详细信息!!妹子详细信息!!妹子详细信息!! </b> <i>想再看下照片?点我!</i> </span></div> </div> </div>
提示:你可以先修改部分代码再运行。
如果你觉得本站文章不错,阅读完有所收获,欢迎捐赠赞助:
(*必填)
(选填)
[ 请确保填写正确的邮箱地址,您的留言审核通过会收到邮件通知! ]
[请申请gravatar头像,木有头像的评论可能不会被回复]
【查看更多】提示:发表说说,请登录
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}