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) 编辑收藏举报

刷新页面返回顶部

羯瑞

所谓成功，就是不停地经历失败，并且始终保持热情...

CSS3_3D效果(IE10_火狐_谷歌)

废话少说，直奔本文主题

导航菜单

翻转图片

旋转木马

再说两句

公告