利用CSS3做简单的图片上下左右翻转

今天想在页面上加一点效果，所以就做了一个图片翻转
直接上代码吧：

1.第一步肯定是在HTML页面上放入图片

     <img class="transition" src="XXX.jpg" />li>

2.第二步骤就是在改元素下面添加一个transition，参数分别表示时间和移动的效果

  .transition {
    -webkit-transition: .9s ease-out;
       -moz-transition: .9s ease-out;
        -ms-transition: .9s ease-out;
         -o-transition: .9s ease-out;
            transition: .9s ease-out;
  }

transition其实有4个参数: property duration timing-function delay;
分别表示
transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-delay 定义transition效果开始的时候
transition-timing-function 指定transition效果的转速曲线
转速曲线又有如下特性：
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

3.接下来就是最重要的变化CSS：

.right {
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }

  .left {
    -webkit-transform: rotateY(-360deg);
       -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
         -o-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
  }

  .top {
    -webkit-transform: rotateX(360deg);
       -moz-transform: rotateX(360deg);
        -ms-transform: rotateX(360deg);
         -o-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }

  .bottom {
    -webkit-transform: rotateX(-360deg);
       -moz-transform: rotateX(-360deg);
        -ms-transform: rotateX(-360deg);
         -o-transform: rotateX(-360deg);
            transform: rotateX(-360deg);
  }

4.最后怎么调用就看自身需要啦，我这边是需要hover翻转，所以只要在hover时加上此变换效果就可以了，同理click也是一样的