由于现在的数码设备越来越多，屏幕的分辨率差异大，为了满足当今的需求，CSS3就诞生了，而且增加了很多新特性属性，就能容易的实现一些动画和3D效果，比JS写的效果更加美观和容易。

jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 方法。

1. 响应式web设计之CSS3 Media Queries

Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。

那么，Media Queries是如何工作的？

两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

在media属性里：

  • screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
  • and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
  • (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时，应用styleB.css

其它属性可看这里：http://www.swordair.com/blog/2010/08/431/

另一种方式，即是直接写在<style>标签里：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
.class {
    background: #ccc;
  }
}

写法是前面加@media，其它跟link里的media属性相同

其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。

要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。

下面是响应式设计（PC+SP）的一个实例：

<meta name="viewport" content="width=device-width">
<style type="text/css">
.container {
  position: relative;
  border: solid #6AC5AC 3px;
}
.containerLabel {
    left: 0px;
    position: absolute;
    background: #6AC5AC;
}
nav {
    border: solid #ff3399 3px;
    box-sizing: border-box;
    overflow: auto;
}
section {
    overflow: auto;
    border: solid #ffcc66 3px;
    box-sizing: border-box;
}
@media screen and (min-width:600px) {
    nav {
      float: left;
      width: 25%;
    }
    section {
      margin-left: 25%;
    }
} 
@media screen and (max-width:599px) {
    nav li {
        display: inline;
        overflow: auto;
    }
}
nav .label, nav .endlabel {
    background: #ff3399;
}
section .label, section .endlabel {
    background: #ffcc66;
}
nav .endlabel, section .endlabel {
    float: right;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  border: solid #96C02E 3px;
  width: 100%;
  box-sizing: border-box;
}
footer .label, footer .endlabel {
    background: #96C02E;
}
</style>
<div class="container elem">
    <span class="containerLabel">&lt;div class="container"&gt;</span>

    <nav class="elem elem-red">
      <span class="label">&lt;nav&gt;</span>
      <ul>
        <li>
          <a href="position-example.html">Home</a>
        </li>
        <li>
          <a href="position-example.html">Taco Menu</a>
        </li>
        <li>
          <a href="position-example.html">Draft List</a>
        </li>
        <li>
          <a href="position-example.html">Hours</a>
        </li>
        <li>
          <a href="position-example.html">Directions</a>
        </li>
        <li>
          <a href="position-example.html">Contact</a>
        </li>
      </ul>
      <span class="endlabel">&lt;/nav&gt;</span>
    </nav>

    <section class="elem elem-green">
      <span class="label">&lt;section&gt;</span>
      <p>
         <code>section</code> 的 <code>margin-left</code> 样式确保了有足够的空间容纳 <code>nav</code> 元素。
      </p>
      <span class="endlabel">&lt;/section&gt;</span>
    </section>

    <section class="elem elem-green ipsum">
      <span class="label">&lt;section&gt;</span>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
      </p>
      <span class="endlabel">&lt;/section&gt;</span>
    </section>

    <section class="elem elem-green">
      <span class="label">&lt;section&gt;</span>
      <p>
        注意观察当你调整浏览器窗口时发生了什么。效果很赞！
      </p>
      <span class="endlabel">&lt;/section&gt;</span>
    </section>

    <footer class="elem elem-orange">
      <span class="label">&lt;footer&gt;</span>
      <p>
        如果你使用了一个固定定位的页眉或页脚，确保有足够的空间来显示它们！我在 <code>body</code> 上面加了 <code>margin-bottom</code> 。
      </p>
      <span class="endlabel">&lt;/footer&gt;</span>
    </footer>

</div>

本站demo地址：

http://zhengyongshun.com/static/css3-responsive-media-queries-layout.html

http://zhengyongshun.com/static/css3-page-layout.html

实现效果如下图：

屏幕宽度够大的时候：

htmlcss3-responsive-design1

屏幕宽度缩小的时候：

htmlcss3-responsive-design2

2. transform元素旋转效果：

1). 静态旋转效果：

.transform{
    -o-transform:translate(-10px,-20px) scale(0.8) rotate(45deg) translate(20px,30px);
    -ms-transform:translate(-10px,-20px) scale(0.8) rotate(45deg) translate(20px,30px);
    -moz-transform:translate(-10px,-20px) scale(0.8) rotate(45deg) translate(20px,30px); 
    -webkit-transform:translate(-10px,-20px) scale(0.8) rotate(45deg) translate(20px,30px);
}
<img class="transform" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />

2). 动态旋转效果：

#element{
    background:#FF6633; 
    -webkit-transition:all 0.5s ease-in-out; 
    -moz-transition:all 0.5s ease-in-out; 
    -o-transition:all 0.5s ease-in-out; 
    -ms-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
<div id="element">
     <img src="http://img.aipaike.com//group1/M00/0C/79/Cvv7ZVdyJneANc73AAO5i6uQbvA283_300x300.jpg">
</div>
var rotateVal = 0;
$('#element').on('click', function(){
    rotateVal += 90;
    //旋转并缩放
    $('#element').css({transform: 'scale(0.5) rotate('+rotateVal+'deg)'});
});

3. transform元素移动效果：

网上一些哥们的杰作，挺好玩的一个：

<style type="text/css">
#div1 {
    background-color: #000000;
    width: auto;
    height: 200px;
    transition: all 2s;
}
#div1:hover {
    margin-top: 100px;
}
#div2 {
    background-color: red;
    width: 200px;
    height: 200px;
    transition: all 3s;
    float: left;
    margin-left: -500px;
}
#div2:hover {
    transform: translate(650%, 0);
}
#move:hover {
    transform: translate(90%, 0);
}
#move {
    width: 500px;
    height: 200px;
    transition: all 3s;
    background-color: #333333;
    float: left;
}
#div3 {
    width: auto;
    height: 200px;
    background-color: green;
    transition: all 3s;
    clear: both;
}
#div5:hover {
    transform: translate(0, 100px);
    background-color: yellow;
}
</style>
<div id="div1"></div>
<div id="move"></div>
<div id="div2"></div>
<div id="div3"></div>

4. transform元素倾斜效果：

通过 skew() 方法，元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）

<style type="text/css">
div {  
    width: 300px;  
    margin: 150px auto;  
    background-color: yellow;  
    text-align: center;  
    -webkit-transform: skew(30deg, 30deg);    /* for Chrome || Safari */  
    -moz-transform: skew(30deg, 30deg);       /* for Firefox */  
    -ms-transform: skew(30deg, 30deg);        /* for IE */  
    -o-transform: skew(30deg, 30deg);         /* for Opera */  
}
</style>
<div>详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob</div>

5. transform元素视觉、透视效果：

perspective的中文意思是：透视，视角（视觉、透视角度）！

perspectiveperspective2

perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D.

我们初中学美术，或者学建筑的同学肯定接触过透视的一些东西：

不过，CSS3 3D transform中的透视的透视点与上面两张示例图是不同的：CSS3 3D transform的透视点是在浏览器的前方！

<style type="text/css">
div {  
    width: 300px;  
    margin: 150px auto;  
    background-color: yellow;  
    text-align: center;  
    -webkit-transform: perspective(500px) rotateY(40deg);     /* for Chrome || Safari */  
    -moz-transform: perspective(500px) rotateY(40deg);        /* for Firefox */  
    -ms-transform: perspective(500px) rotateY(40deg);         /* for IE 缩放0.5 */  
    -o-transform: perspective(500px) rotateY(40deg);          /* for Opera */  
}  
</style>
<div>详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob</div>

Transform 2D效果：http://zhengyongshun.com/css3-2d-transfrom-move-element/

Transform 3D效果：http://zhengyongshun.com/css3-3d-transfrom-animation/

6. 动画和过渡实现3D变换

转换元素的起点、原点位置；视觉的焦点、中心位置设置

<style type="text/css">
    #div1 { 
        /*转换元素的起点、原点位置*/
        transform-origin: 150px 500px;  
        animation: scrollText 200s linear infinite;       
    }  
    #parentDiv {
        /*视觉、透视角度*/
        perspective: 500px;
        /*视觉的焦点、中心位置*/
        perspective-origin: 150px 500px;  
    }  
    @keyframes scrollText {  
        0% { transform: rotateX(45deg) translateY(500px); }  
        100% { transform: rotateX(45deg) translateY(-9000px); }  
    }
</style>
<div id="parentDiv">
    <div id="div1">
        详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>  

        详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>  

        详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>  

        详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>  

        详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>  

        详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>
    </div>
</div>

类似参考：

http://www.internetke.com/jsEffects/2015080340/

@keyframes 规则

1).上面用到@keyframes，是元素移动引用的效果，不支持IE 9及以下，来看下面例子：

<style> 
div
{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:mymove 5s infinite;
  -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
  from {top:0px;}
  to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
  from {top:0px;}
  to {top:200px;}
}
</style>
<div></div>

2).定时旋转(一直旋转)

<style>
*{margin:0;padding:0;}/*简单可以自定义，参照上面*/
body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, System;background-color:#FFF;}
#imgg{animation:imgg 1s linear 0s infinite;}
@keyframes imgg{
    0%{transform:rotateY(0deg);}
    25%{transform:rotateY(90deg);}
    50%{transform:rotateY(180deg);}
    75%{transform:rotateY(270deg);}
    100% {transform:rotateY(360deg);}
}
</style>
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm15.jpg" alt="" width="100" height="100" id="imgg">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg" alt="" width="100" height="100" id="imgg">

7. HTML+CSS3元3D旋转效果（IE10或以上才可以）

以前在网上经常看到3D很酷的旋转效果，今天终于静下心来好好了解一下了，看了张鑫旭的文章，终于了解了基本3D动画的属性，唉，还是挺蛋疼的说，直接上code吧：

<style type="text/css">
    body{
        overflow: hidden;
    }
    #stage{
        width: 1000px;
        min-height: 300px;
        margin-left: auto;
        margin-right: auto;
        padding: 450px 8px;
        background-color: #f0f0f0;
        box-shadow: inset 0 0 3px rgba(0,0,0,.35);
        -webkit-perspective: 800px;
        -moz-perspective: 800px;
        perspective: 800px;
        -webkit-transition: top .5s;
        position: relative;
        top: 0;
    }
    #container{
        width: 128px;
        height: 200px;
        margin-left: -64px;
        -webkit-transition: -webkit-transform 1s;
        -moz-transition: -moz-transform 1s;
        -ms-perspective: 800px;
        transition: transform 1s;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: absolute;
        left: 50%;
    }
    .piece {
        width: 128px;
        box-shadow: 0 1px 3px rgba(0,0,0,.5);
        -webkit-transition: opacity 1s, -webkit-transform 1s;
        -moz-transition: opacity 1s, -moz-transform 1s;
        transition: opacity 1s, transform 1s;
        position: absolute;
        bottom: 0;
        -webkit-box-shadow:0 0 10px #0CC;
        -moz-box-shadow:0 0 10px #0CC;
        box-shadow:0 0 10px #0CC;
    }
    .btn {
        text-align: center;
        margin: 0;
    }
</style>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<body id="bodyContainer">
    <p class="btn">
        <button class="leftClick">leftClick</button>
        <button class="upClick">upClick</button>
        <button class="downClick">downClick</button>
        <button class="rightClick">rightClick</button>
    </p>
<div id="stage">
    <div id="container">
        
    </div>
</div>
<script>
var browserType, browserVersion, ua=navigator.userAgent.toLowerCase();
if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
    //浏览器类型
    browserType = "ie";
    //浏览器版本
    browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
}

/*
 * JS判断一个值是否存在数组中
 * @param {type} arr
 * @returns {Boolean}
 */
// 定义一个判断函数
var inArray = function(arr){
    // 判断参数是不是数组
    var isArr = arr && (
        typeof arr==='object' ? arr.constructor===Array ? arr.length ? arr.length===1 ? arr[0]:arr.join(','):'an empty array': arr.constructor: typeof arr
    );

    // 不是数组则抛出异常
    if(!isArr){
        throw "arguments is not Array";
    }

    // 遍历是否在数组中
    for(var i=0,k=arr.length;i<k;i++){
        if(this==arr[i]){
            return true;
        }
    }

    // 如果不在数组中就会返回false
    return false;
}

// 给字符串添加原型
String.prototype.inArray = inArray;
// 给数字类型添加原型
Number.prototype.inArray = inArray;

(function() {
    if (typeof window.screenX === "number") {
        var picObj, rotateX = 0, rotateY = 0;
        // 显示图片
        var htmlPic = '', arrayPic = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20], rotate = 360 / arrayPic.length, arrayRotate = [], arrayShow = [19, 20, 0, 1, 2];
        arrayPic.forEach(function(i, j) {
                arrayRotate[j] = rotate * j;
                htmlPic = htmlPic + '<img id="piece'+ i +'" src="/wp-content/uploads/2017/03/mm'+ i +'.jpg" class="piece" />';	
        });

        // 手机触摸的运动方向
        var direction = 'left', lastDirection = 'left', diffX = 0, diffY = 0, moveContainer = document.getElementById('bodyContainer');

        // 元素
        var eleStage = $("#stage"), eleContainer = $("#container"), indexPiece = 0;
        // 元素
        var transZ = 64 / Math.tan((rotate / 2 / 180) * Math.PI);

        // CSS transform变换应用
        var transform = function (element, value, key) {
                key = key || "transform";
                element.css(key, value);
                return element;
        }
        , moveEvent = function (direction) {
            if(lastDirection != direction) {
                indexPiece = 0;
//                alert('direction=>'+direction+'; lastDirection=>'+lastDirection);
            }
            if (direction == 'left' || direction == 'right') {
                if (browserType == 'ie') {
                    var imgSize = $('.piece').size();
                    if (direction == 'left') {
                        arrayShow.shift();// 移除第一个元素
                        arrayShow.push((arrayShow[arrayShow.length-1]+1)%imgSize);//向末尾添加一个元素
                    } else {
                        arrayShow.pop();// 移除最後一个元素
                        arrayShow.shift((arrayShow[0]-1)%imgSize);//向开头添加一个元素
                    }
                    // 翻转图片，IE虽然有3D翻转效果，但是图片后面渲染上去的会覆盖前面渲染的图片，后面的z-index层级高
                    arrayPic.forEach(function(i, j) {
                        picObj = $("#piece" + i);
                        if (j.inArray(arrayShow)) {
                            picObj.css('z-index', 1);
                            // 刚要翻转不见的那张暂时z-index为1，不然会被后面的覆盖掉
                            $('.piece').eq(Math.abs(j-1)).css('z-index', 1);
                        }
                        arrayRotate[j] -= rotate;
                        transform(picObj, "rotateY("+ arrayRotate[j] +"deg) rotateX("+ rotateX +"deg) translateZ("+ (transZ + 20) +"px)");
                        if (!j.inArray(arrayShow)) {
                            picObj.css('z-index', 'auto');
                        }
                    });
                } else {
                    if (direction == 'left') {
                        rotateY = (-1 * rotate * ++indexPiece);
                        // 翻转container
                        transform(eleContainer, "rotateX("+ rotateX +"deg) rotateY("+ rotateY +"deg)");
                    } else {
                        rotateY = (1 * rotate * ++indexPiece);
                        // 翻转container
                        transform(eleContainer, "rotateX("+ rotateX +"deg) rotateY("+ rotateY +"deg)");
                    }
                }
            } else {
                if (direction == 'down') {
                    rotateX = (-1 * rotate * ++indexPiece);
                    // 翻转container
                    transform(eleContainer, "rotateX("+ rotateX +"deg) rotateY("+ rotateY +"deg)");
                } else {
                    rotateX = (1 * rotate * ++indexPiece);
                    // 翻转container
                    transform(eleContainer, "rotateX("+ rotateX +"deg) rotateY("+ rotateY +"deg)");
                }
            }
            lastDirection = direction; //记录上一次的滚动方向，如果是反方向则置空indexPiece
        };

        eleContainer.html(htmlPic);
        eleContainer.on("click", function() {
                direction = 'left';
                moveEvent(direction);
        });

        arrayPic.forEach(function(i, j) {
            picObj = $("#piece" + i);

            if (browserType == 'ie') {
                if (j.inArray(arrayShow))
                    picObj.css('z-index', 1);
            }

            transform(picObj, "rotateY("+ j * rotate +"deg) translateZ("+ (transZ + 20) +"px)");
        });

        // 手机触摸事件
        moveContainer.addEventListener("touchstart", function(event) {
            var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
            diffX = touch.pageX; //取第一个touch的坐标值
            diffY = touch.pageY; //取第一个touch的坐标值
        });
        moveContainer.addEventListener("touchmove", function(event) {
            var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
            if (diffX > touch.pageX) {
                direction = 'left';
            } else if (diffX < touch.pageX) {
                direction = 'right';
            }
            if (diffY > touch.pageY) {
                direction = 'down';
            } else if (diffY < touch.pageY) {
                direction = 'up';
            }
            moveEvent(direction);
        });
//        moveContainer.addEventListener("touchend", function(event) {
//        });
        $('.leftClick').on('click',function () {
            direction = 'left';
            moveEvent(direction);
        });
        $('.upClick').on('click',function () {
            direction = 'up';
            moveEvent(direction);
        });
        $('.downClick').on('click',function () {
            direction = 'down';
            moveEvent(direction);
        });
        $('.rightClick').on('click',function () {
            direction = 'right';
            moveEvent(direction);
        });
    } else {
            alert("浏览器不能很好的支持！");	
    }
})();
</script>
</body>

本站demo地址：http://zhengyongshun.com/static/transform-3d-images.html

详细文章请看：

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

Demo示例：

http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html

http://www.jianshu.com/p/f608245b7ba6

http://www.17sucai.com/preview/1/2013-06-05/%E6%97%8B%E8%BD%AC%E6%9C%A8%E9%A9%AC/index.html

http://www.cnblogs.com/jihua/p/3dcss3.html

http://www.xwcms.net/webAnnexImages/fileAnnex/20140425/53531/index.html

http://sc.chinaz.com/jiaoben/161122294890.htm

http://www.jb51.net/jiaoben/241583.html