好久没写博客了，看了下记录，上次最后写的最后一篇已经是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 画布好像可以弄成很多好玩的，有学习的地址么？
时间： 2024-08-25 17:51:34