首页 > 代码库 > CSS3_3D效果(IE10_火狐_谷歌)
CSS3_3D效果(IE10_火狐_谷歌)
好久没写博客了，看了下记录，上次最后写的最后一篇已经是8月1号了，最近有些小东西整理下，当巩固吧
废话少说，直奔本文主题
css3提供了很多新鲜好玩的东西，transform就是其中一个，可以进行 2D 或 3D 转换。先来看看兼容性：
导航菜单
rotateX(deg)——沿着 X 轴的 3D 旋转
translateZ(25px)——定义 3D 转换，只是用 Z 轴的值
元素内两个span,后者图片背景叠加的效果，背景也渐变处理
效果：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航菜单</title> <style> *{padding:0;margin:0;} .nav{background: #222;height:50px;} ul{width: 1150px;margin:0 auto;font-size: 16px;color: #fff} li{float: left;padding:0 20px;position: relative;list-style: none;height:50px;line-height: 50px;text-align: center;perspective:1150px;background-color: #74adaa} .nav_3d,.nav_3d span{position: absolute;top:0;left:0;width: 100%;height: 100%;} .nav_3d{transition:all 0.3s linear;transform-style: preserve-3d;} .nav_3d span:first-child{transform:rotateX(0deg) translateZ(25px);} .nav_3d span:last-child{transform:rotateX(-90deg) translateZ(25px);} li:hover .nav_3d{transform:translateZ(-25px) rotateX(90deg);} li:hover .nav_3d span{background:#51938F linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);background-size: 5px 5px;} </style> </head> <body> <div class="nav"> <ul> <li>首页<div class="nav_3d"><span>首页</span><span>首页</span></div></li> <li>破解<div class="nav_3d"><span>破解</span><span>破解</span></div></li> <li>单击<div class="nav_3d"><span>单击</span><span>单击</span></div></li> <li>网游<div class="nav_3d"><span>网游</span><span>网游</span></div></li> <li>资讯<div class="nav_3d"><span>资讯</span><span>资讯</span></div></li> <li>排行榜<div class="nav_3d"><span>排行榜</span><span>排行榜</span></div></li> <li>专题<div class="nav_3d"><span>专题</span><span>专题</span></div></li> <li>工具<div class="nav_3d"><span>工具</span><span>工具</span></div></li> </ul> </div> </body> </html>
翻转图片
translateZ(-137px) rotateY(90deg); 跟上面的类似
下面有做了四向的处理，自行改造哈
效果：
代码：
<!doctype html> <htmllang="en"> <head> <meta charset="UTF-8"> <title>翻转图片</title> <style> *{padding:0;margin:0;} .content{text-align: center;width: 1000px;margin:0 auto;} h1{margin:20px 0;} /*perspective 元素距离视图的距离,定义 3D 元素距视图的距离*/ .box{display: inline-block;width: 274px;height:390px;margin:20px;position: relative;overflow: hidden;perspective: 5000px;} .block{height: 390px;transform-style: preserve-3d;transition:transform .6s;} .block img{display: block;position: absolute;width: 274px;height: 390px;transition: all .6s;} .block p{display: block;position: absolute;width: 274px;height: 390px;text-align: left;background:linear-gradient(to bottom,#fff,#3ef);transition: all .6s;} /*下翻上*/ /*.block img{transform: translateZ(195px);} .block p{transform: rotateX(-90deg) translateZ(195px);} .block:hover{transform:translateZ(-195px) rotateX(90deg);}*/ /*上翻下*/ /* .block img{transform: translateZ(195px);} .block p{transform: rotateX(90deg) translateZ(195px);} .block:hover{transform:translateZ(-195px) rotateX(-90deg);}*/ /*左翻右*/ /*.block img{transform: translateZ(137px);} .block p{transform: rotateY(90deg) translateZ(137px);} .block:hover{transform:translateZ(-137px) rotateY(-90deg);}*/ /*右翻左*/ .block img{transform: translateZ(137px);} .block p{transform: rotateY(-90deg) translateZ(137px);} .block:hover{transform:translateZ(-137px) rotateY(90deg);} </style> </head> <body> <div class="content"> <h1>CSS3——3D转转图片</h1> <h1>寒战2</h1> <div class="box"> <div class="block"> <img src="img/1.jpg" alt=""> <p><strong>刘杰辉</strong><br/><br/>新晋香港警队警务处处长，能力越大，责任越大，他的每一句话、每一个决定都会影响到整个大局。针对他的阴谋重重袭来，其妻儿又遭遇绑架，不仅职权地位岌岌可危，身家性命更受到威胁。</p> </div> </div> <div class="box"> <div class="block"> <img src="img/2.jpg" alt=""> <p><strong>李文斌</strong><br/><br/>前警务处行动副处长，本来已经开始过着退休的生活，也再次卷入风波，儿子李家俊又要有大动作，他也没办法幸免，既要把他绳之于法，还要保住他的命。他觉得如果刘杰辉继续带领警队的话，警队会变成很大的麻烦，所以要重返警队。 </p> </div> </div> <div class="box"> <div class="block"> <img src="img/3.jpg" alt=""> <p><strong>梁紫薇</strong><br/><br/>原香港警队公共关系科主管，现升职为高级助理处长，再度成为新晋警务处处长刘杰辉的左臂右膀。职责由警队的发言人进一步转变为寒战行动中的核心人员。</p> </div> </div> <div class="box"> <div class="block"> <img src="img/4.jpg" alt=""> <p><strong>欧咏恩</strong><br/><br/>大律师简奥伟的爱徒，和师傅的关系情同父女，简奥伟也相当于父亲一样照顾她。欧咏恩看似文静但内心非常自信强势，隐隐透着几分坚忍。 </p> </div> </div> <div class="box"> <div class="block"> <img src="img/5.jpg" alt=""> <p><strong>简奥伟</strong><br/><br/>资深大律师、议员。他的出现将警队内部的矛盾升级为整个香港执法与律法之间的矛盾。将掀起司法界对警界的问责之战，从警界拓展到整个香港政治圈。 </p> </div> </div> <div class="box"> <div class="block"> <img src="img/6.jpg" alt=""> <p><strong>李家俊</strong><br/><br/>李文斌之子，是一个智商极高又非常冷静的犯罪天才，这个不安定分子再次陷入情与法的纠葛，他是整个香港警队的头号公敌，为了他整个香港警队四分五裂，有人要保他，有人要捉他，几乎每个人都因为他而非常惨。 </p> </div> </div> <div class="box"> <div class="block"> <img src="img/7.jpg" alt=""> <p><strong>张国标</strong><br/><br/>廉政公署首席调查主任。是一个想用个人的力量去证明一些东西的人，他很想证明给全世界看，他凭借自己的个人能力就可以改变局面。</p> </div> </div> <div class="box"> <div class="block"> <img src="img/8.jpg" alt=""> <p><strong>何国正</strong><br/><br/>前华裔英兵，退役的警队精英，是个亦正亦邪人物，一方面和黑暗势力勾结，制造一系列爆炸、枪击事件，另一方面，他曾是香港警队警务处副处长李文彬的得力干将，两人关系如父如子。他还为李文彬在1995年的某事件中背了黑锅，假死后隐姓埋名。 </p> </div> </div> <div class="box"> <div class="block"> <img src="img/9.jpg" alt=""> <p><strong>蔡元祺</strong><br/><br/>香港前警务处处长，老谋深算的警界高层，亲自出面拉拢李文彬，他透露自己有律政司出面加上有很多有权力的人，能够帮助李文彬重返警队，当上处长。 </p> </div> </div> </div> </body> </html>
旋转木马
rotateY(0deg) translateZ(195px) 类似
那段js 处理的是点击效果
效果：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马</title> <style> h1{text-align: center;} .content{margin:0 auto;perspective: 800px;} .box{height:390px;width:128px;margin:20px auto;position: relative;transform-style: preserve-3d;transition:transform .6s;} .box img{display: block;position: absolute;width: 128px;bottom:0;transition: all .6s;} .box img:nth-child(1) { transform: rotateY(0deg) translateZ(195px); } .box img:nth-child(2) { transform: rotateY(40deg) translateZ(195px); } .box img:nth-child(3) { transform: rotateY(80deg) translateZ(195px); } .box img:nth-child(4) { transform: rotateY(120deg) translateZ(195px); } .box img:nth-child(5) { transform: rotateY(160deg) translateZ(195px); } .box img:nth-child(6) { transform: rotateY(200deg) translateZ(195px); } .box img:nth-child(7) { transform: rotateY(240deg) translateZ(195px); } .box img:nth-child(8) { transform: rotateY(280deg) translateZ(195px); } .box img:nth-child(9) { transform: rotateY(320deg) translateZ(195px); } </style> <script> var index=1; function tra(d){ var boxObj=document.getElementById(‘box‘); boxObj.style["transform"]="rotateY("+(-index)*40+"deg)"; index++; } </script> </head> <body> <h1>旋转木马</h1> <div class="content"> <div class="box" id="box"> <img onclick="tra(1)" src="img/1.jpg" alt=""> <img onclick="tra(2)" src="img/2.jpg" alt=""> <img onclick="tra(3)" src="img/3.jpg" alt=""> <img onclick="tra(4)" src="img/4.jpg" alt=""> <img onclick="tra(5)" src="img/5.jpg" alt=""> <img onclick="tra(6)" src="img/6.jpg" alt=""> <img onclick="tra(7)" src="img/7.jpg" alt=""> <img onclick="tra(8)" src="img/8.jpg" alt=""> <img onclick="tra(9)" src="img/9.jpg" alt=""> </div> </div> </body> </html>
再说两句
demo下载：CSS3_3D效果(IE10_火狐_谷歌).rar
1.效果还有很多种，有新鲜好玩的可以@我
2.要类似效果的业务场景不多，而且兼容也不是很理想，但是再往后肯定是会成主流吧
3.H5 画布好像可以弄成很多好玩的，有学习的地址么？
CSS3_3D效果(IE10_火狐_谷歌)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。