css3之3D盒子 以及css3样式兼容判断

这篇博客不着重讲述css3，重点在javascript  做css3样式兼容的判断

demo：http://sandbox.runjs.cn/show/lasnas62

另外一个：http://runjs.cn/code/6f2uijee



html：

<div id="wrap">

    <div class="wrap2">

        <div class="left">L</div>

        <div class="mid">2</div>

        <div class="right">R</div>

        <div class="top">1</div>

        <div class="btm">3</div>

        <div class="bg">4</div>

    </div>

</div>

css:

<style>

        *{margin:0;padding:0;}

        body{-webkit-perspective:800px; /*景深-----------------眼睛到屏幕的距离*/

          -webkit-transform-style:preserve-2d;

       -ms-transform-style:preserve-2d;

}

/*=======动画========*/

        @-webkit-keyframes ror

        {

            0%{

                -webkit-transform:rotateX(-90deg);

            }

            25%{

                -webkit-transform:rotateX(-180deg);

            }

            75%{

                -webkit-transform:rotateX(-270deg);

            }

            100%{

               -webkit-transform:rotateX(-360deg);

           }

        }

        @-ms-keyframes ror

        {

            0%{

                -ms-transform:rotateX(-90deg);

            }

            25%{

                -ms-transform:rotateX(-180deg);

            }

            75%{

                -ms-transform:rotateX(-270deg);

            }

            100%{

                -ms-transform:rotateX(-360deg);

            }

        }

        /*div{width:200px;height:200px;position: relative;left:300px;top:120px;font-size:60px;text-shadow:0 0 10px orange;line-height:200px;text-align:center;color:#fff;background:orchid;}*/

        #wrap{

    width:300px;

    height:300px;

     position:relative;

   margin:100px auto;

   border:1px solid #000000;

  /*==============翻转的位置=============*/

            -webkit-transform-origin:top;

            -ms-transform-origin:top;

            -moz-transform-origin:top;

    /*==============3D 模式=============*/

            -webkit-transform-style:preserve-3d;

            -ms-transform-style:preserve-3d;

            -moz-transform-style:preserve-3d;

        }

        .wrap2{

     width:300px;

   height:300px;

  position:relative;

/*==========开启动画=============*/

            -webkit-animation:ror 20s infinite ;

            -webkit-transform-origin:50% 50% 50px;

            -webkit-transform-style:preserve-3d;

            -ms-animation:ror 20s infinite;

            -ms-transform-origin:50% 50% 50px;

            -ms-transform-style:preserve-3d;

            -moz-animation:ror 20s infinite;

            -moz-transform-origin:50% 50% 50px;

            -moz-transform-style:preserve-3d;

/*=========背后的div不显示================*/

      -webkit-backface-visibility:visiable;

}

        .wrap2 div{width:100px;height:100px;position: absolute;color:#fff;line-height: 100px;text-align: center;font-size: 25px;font-weight: bold;}

        #wrap .left{

             background:brown;top:100px;left:0;

            -webkit-transform-origin:right;

            -webkit-transform:rotateY(90deg);   /*在3D环境里面翻转*/

            -ms-transform-origin:right;

            -ms-transform:rotateY(90deg);

            -moz-transform-origin:right;

            -moz-transform:rotateY(90deg);

            /*-webkit-transform:rotateY(-90deg);-webkit-transform-origin:right;*/}

        #wrap .mid{background:orchid;top:100px;left:100px;

            -webkit-transform:translateZ(0px);

            -ms-transform:translateZ(0px);

            -moz-transform:translateZ(0px);

        ;}

        #wrap .right{background:orange;left:200px;top:100px;

            -webkit-transform-origin:left;

            -webkit-transform:rotateY(-90deg);

            -ms-transform-origin:left;

            -ms-transform:rotateY(-90deg);

            -moz-transform-origin:left;

            -moz-transform:rotateY(-90deg);

            /*-webkit-transform:rotateY(90deg);-webkit-transform-origin:left;*/}

        #wrap .top{background:orange;left:100px;top:0;

           -webkit-transform-origin:bottom;

            -webkit-transform:rotateX(-90deg);

            -ms-transform-origin:bottom;

            -ms-transform:rotateX(-90deg);

            -moz-transform-origin:bottom;

            -moz-transform:rotateX(-90deg);

            /*-webkit-transform:rotateX(90deg);-webkit-transform-origin:bottom;*/}

        #wrap .btm{background:darkcyan;top:200px;left:100px;

            -webkit-transform-origin:top;

            -webkit-transform:rotateX(90deg);

            -ms-transform-origin:top;

            -ms-transform:rotateX(90deg);

            -moz-transform-origin:top;

            -moz-transform:rotateX(90deg);

            /*-webkit-transform:rotateX(-90deg);-webkit-transform-origin:top;*/}

        #wrap .bg{background:greenyellow;top:100px;left:100px;

            -moz-transform:translateZ(100px);

            -webkit-transform:translateZ(100px);

           /*===============translateZ是离屏幕的距离，perpertive是指眼睛到屏幕的距离========================*/

            -ms-transform:translateZ(100px);

        }

javascript：

思路：

1.做css兼容判断，首先是获取document.documentElement.style,也就是当前浏览器所支持的样式名数组，

2.把自己需要做兼容判断的样式和document.documentElement.style数组进行匹配，如果找到你所需要判断的样式名，那就说明当前浏览器支持当前样式，

3.因为不同的浏览器支持特定的前缀，所以在进行匹配前，我们需要给我们需要做兼容判断样式名添加前缀并并push到数组

code1：

var array=[];

    var body=document.getElementsByTagName("body")[0].style;

    for(var dd in body){

        array.push(dd)

    }

    //是否支持css的某个属性

    function isSuportCss(property){

        var body = $("body")[0];

        for(var i=0; i<property.length;i++){

            if(property[i] in body.style){

                return true;

            }

        }

        return false;

    }

/*需要检测的样式名，这里避免麻烦---我们手动写数组*/

   var perspective=["mozPerspective","webkitPerspective","msPerspective","oPerspective","perspective"];

    var transformStyle=["msTransformStyle","mozTransformStyle","oTransformStyle","webkitTransformStyle","transformStyle"];

    var animation=["webkitAnimation","msAnimation","oAnimation","mozAnimation","animation"];

    var transform=["webkitTransform","oTransform","mozTransform","msTransform","transform"]

/*调用isSuportCss函数对上面的样式名进行判断，返回true或false*/

   var result=(isSuportCss(perspective)&&isSuportCss(transformStyle)&&isSuportCss(animation)&&isSuportCss(transform));

code2：

这里我们就不用手动写数组了，如果需要测试的样式名太多会很麻烦，上面仅仅是给个思路

下面我们来写一个完整的：

//是否支持css的某个样式名

  

function supportCss3(style) { 

var prefix = ['webkit', 'Moz', 'ms', 'o'],//前缀，这里我们仅仅需要手动写一个将要添加的前缀列表数组
i,
humpString = [],
//添加了前缀后的样式名列表
               htmlStyle = document.documentElement.style,//获取document的样式数组
       _toHumb = function (string) { 
     return string.replace(/-(\w)/g, function ($0, $1)

                    {     //这里i的$0,$1分别对应的是索引0 1 ...对应的字符
         return $1.toUpperCase(); // //把穿进来的样式名打一个字符转换为大写
            }); 
   }; 
 
for (i in prefix){  
 //添加前缀
humpString.push(_toHumb(prefix[i] + '-' + style)); //把添加前缀的样式名字丢到数组
 }

humpString.push(_toHumb(style));  //未添加前缀的的样式名字也丢到数组
 
for (i in humpString){  //遍历样式数组
if (humpString[i] in htmlStyle)

                {
return true; 
}
}
return false; 

}

通过样式名判断函数的返回值，我们可以对不兼容的浏览器进行一些相应的处理，例如我们的3D盒子在不兼容的浏览器上做了淡入淡出的向后兼容的处理

从开篇到现在，“样式名”--一直强调这个字，我们进行判断的一直都是通过样式的名字和浏览器支持的样式名进行对比，

现实中，我们会遇到这样的一个头疼的事情，同一个样式的不同属性的兼容不同

例如我们这个demo的perspective 属性，IE10返回值是true，但是在浏览器的控制面板里面显示

 
不支持“preserve-3d”，这导致了无法执行我们的向下兼容处理的那段代码

这种情况---《javascript框架设计》------第3节
样式的支持侦测 提供了插件解决，可惜今晚把书还给了图书馆，有空 再解决这个问题