trannform:
translate(参数1，参数2)；让元素在X轴与Y轴方向发生偏移-->参数1：X；参数2：Y
rotate(参数1)；让元素进行旋转；单位(deg)
scale(参数1，参数2)；让元素在X轴与Y轴放大或缩小多少倍-->参数1：X；参数2：Y
skew(参数1，参数2)；skew(30deg,20deg)-->围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
transition:过渡效果
transition: all 1s linear 3s;
*过渡效果
参数1：用来指定对那些属性使用过渡效果
参数2：过渡效果的持续时间
参数3：过渡效果的显示速度变化
参数4：用来指定过渡效果的延迟时间*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div1{
width: 100px;
height: 100px;
/*过渡效果
参数1：用来指定对那些属性使用过渡效果
参数2：过渡效果的持续时间
参数3：过渡效果的显示速度变化
参数4：用来指定过渡效果的延迟时间*/
transition: all 1s linear 3s;
border: 1px solid red;
margin: auto;
background-image: url("../../../img/f3_Android1.png");
background-size: 100% 100%;
}
#div1:hover{
/*translate：让元素在X和Y轴发生偏移 参数1：X轴方向偏移 参数2：Y轴方向偏移
translatex:让元素在X轴方向发生偏移
translatey:让元素在Y轴方向发生偏移*/
/*transform: translate(50px,0);*/
/*scale:让元素在X轴和Y轴都发生缩放 参数1：X轴方向的方法倍数 参数2：Y轴方向的放大倍数
scaleX：让元素在X轴方向发生缩放
scaleY：让元素在Y轴方向发生缩放*/
transform: scaleX(1.5);
/*rotate：让你的元素按照指定的中心点进行旋转
rotateX:让元素沿着X轴旋转
rotateY：让元素沿着Y轴旋转
*/
/*transform: rotateY(180deg);*/
/*transform: skewY(-90deg);*/
/*transform-origin:用来设置旋转的中心点*/
/*transform-origin: left;*/
}
</style>
<title>变形效果</title>
</head>
<body>
<div id="div1">
</div>
</body>
</html>