既然是要过渡那么就需要先看看过渡是什么了下面放例子

过渡的实现

css3 2D与3D变换

全部用到transform属性
2d和3d都是通用的格式
2d:translate() rotate() scale()
字面意思就是变换位置旋转变换大小
3d:translateX translateY translatezZ
其他的一样都是加上XYZ即可

过渡

用到了transition: all xs;
x更改为你需要转换的时间
之后只需要再定义一个hover伪类进行鼠标放上去的一顿2d3d变换即可

源代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>css3过渡测试</title>
    <style>
      div.one
      {
        width: 400px;
        height: 400px;
        background-color: red;
        transition: width 2s;
      }
      div.one:hover
      {
        width: 200px;
      }
      div.two
      {
        width: 400px;
        height: 400px;
        background-color: blue;
        transition: all 2s;
      }
      div.two:hover
      {
        background-color: yellow;
        transform: rotate(270deg) translate(100px,100px);
      }
      div.three
      {
        width: 400px;
        height: 400px;
        background-color: black;
        transition: all 3s;
      }
      div.three:hover
      {
        width: 200px;
        height: 200px;
        background-color: white;
        transform: rotateY(360deg);
      }
    </style>
  </head>
  <body>
    <h1><b>下面演示几种过渡效果,你只需要把鼠标放上即可</b></h1>
    <div class="one">
    </div>
    <p>这是第一种效果</p>
    <div class="two">
    </div>
    <p>这是第二种效果</p>
    <div class="three">
    </div>
    <p>这是第三种效果</p>
  </body>
</html>