transition: 过渡，transform: 转换 转变 旋转

<style>

    /* 

    transition: 过渡  

    transition-delay：过渡延迟  

    transition-duration：过渡持续时间  

    transition-property：过渡属性  

    transition-timing-function：过渡定时功能 

    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

    要实现这一点，必须规定两项内容：

    指定要添加效果的CSS属性

    指定效果的持续时间。

    注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

    transform: 转换 转变 旋转

    */

    div {

      width: 100px;

      height: 100px;

      background-color: cyan;

      transition: all 2s;

      /* Safari */

      -webkit-transition: all 2s;

      /* Safari */

    }

    div:hover {

      width: 300px;

      width: 300px;

      background-color: green;

      transform: rotate(9deg);  // 旋转9度

      -ms-transform: rotate(9deg); /* Internet Explorer */

      -moz-transform: rotate(9deg); /* Firefox */

      -webkit-transform: rotate(9deg); /* Safari 和 Chrome */

      -o-transform: rotate(9deg); /* Opera */

    }

  </style>