鼠标悬停图片放大、元素的旋转和缩放

鼠标悬停图片放大：

#div1 img{
  cursor: pointer;
  transition: all 1.1s;
}
#div1 img:hover{
  transform: scale(1.2);
}

元素的旋转和缩放：

transfrom是css3里面的属性，主要是运用于元素的2D或3D转换，它可以将元素旋转、缩放、移动和倾斜。

div{
    transform:rotate(7deg);    //2D旋转，括号参数为角度
}

transfrom属性的默认值为none，意义为不进行转换。

transfrom属性有很多，能够支持我们做一些简单的2d和3d动画，例如：一个不断旋转的立方体

在使用transfrom来制作简单的3D动画之前，得需要了解到transfrom的常用属性：

　　translateX(x) 定义转换，只是用 X 轴的值，表示在二维平面上水平方向移动元素，括号里的值是移动的像素 单位 px。

 　　translateY(y) 定义转换，只是用 Y 轴的值，表示在垂直方向上移动，括号里面的值和**translateX(x)**里面括号的值是一个意思，不过数值越大越往下走

　　translateZ(z) 定义 3D 转换，只是用 Z 轴的值

　　rotateX(angle) 定义沿着 X 轴的 3D 旋转，angle代表的是旋转的角度

 　　rotateY(angle) 定义沿着 Y 轴的 3D 旋转

　　rotateZ(angle) 定义沿着 Z 轴的 3D 旋转