CSS3_3D效果(IE10_火狐_谷歌)

好久没写博客了，看了下记录，上次最后写的最后一篇已经是8月1号了，最近有些小东西整理下，当巩固吧

废话少说，直奔本文主题

css3提供了很多新鲜好玩的东西，transform就是其中一个，可以进行 2D 或 3D 转换。先来看看兼容性：

aaarticlea/png;base64,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" alt="" />

导航菜单

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