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 画布好像可以弄成很多好玩的,有学习的地址么?

 

posted @ 2016-11-04 15:48  羯瑞  阅读(897)  评论(0编辑  收藏  举报