css部分
#box{
height: 200px;
width: 200px;
border:1px solid #000;
/*1.鼠标滑过宽度变为原来的120%*/
transition-property: width; /*所要过渡的属性名称*/
transition-duration: 1s;/*过渡的时间*/
transition-timing-function: linear;/*过渡的时间曲线*/
transition-delay: 0;/*过渡的开始时间*/
/*2.鼠标滑过加上阴影*/
transition-property: box-shadow; /*所要过渡的属性名称*/
transition-duration: 1s;/*过渡的时间*/
transition-timing-function: linear;/*过渡的时间曲线*/
transition-delay: 0;/*过渡的开始时间*/
/*以上写法比较麻烦所以可以简写成：*/
transition: all 1s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/
-ms-transition: all 1s linear 0s;/*兼容IE10+*/
-moz-transform: all 1s linear 0s;/*兼容 Firefox */
-o-transition: all 1s linear 0s;/* 兼容Opera */
-webkit-transform: all 1s linear 0s;/* 兼容Safari and Chrome */;
}
/*transform(2D转换)
属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)*/
#box:hover{
width: 120%;
box-shadow: 0px 0px 5px orange;
/*3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果*/
/*1.平移*/
transform: translate(50px,50px); /*translate() 如果一个值表示x轴需要平移的距离，两个值则表示x、y轴需要平移的距离*/
-webkit-transform: translate(50px,50px);/* 兼容Safari and Chrome */;
-ms-transform: translate(50px,50px);/*兼容IE10+*/
-moz-transform: translate(50px,50px);/*兼容 Firefox */
-o-transform: translate(50px,50px);/* 兼容Opera */
/*只让x轴平移*/
transform: translateX(50px);
-webkit-transform: translateX(50px);/* 兼容Safari and Chrome */;
-ms-transform: translateX(50px);/*兼容IE10+*/
-moz-transform: translateX(50px);/*兼容 Firefox */
-o-transform: translateX(50px);/* 兼容Opera */
/*只让y轴平移*/
transform: translateY(50px);
-webkit-transform: translateY(50px);/* 兼容Safari and Chrome */;
-ms-transform: translateY(50px);/*兼容IE10+*/
-moz-transform: translateY(50px);/*兼容 Firefox */
-o-transform: translateY(50px);/* 兼容Opera */
/*2.旋转*//*兼容性同 平移*/
transform:rotate(45deg); /*正值表示顺时针旋转，负值表示逆时针旋转*/
/*只让x轴旋转*/
transform:rotateX(45deg);
/*只让y轴旋转,相当一3D旋转*/
transform:rotateY(45deg);
/*3.缩放*//*兼容性同 平移*/
transform:scale(0,0.2); /*两个值，第一个表示水平缩放，第二个表示竖直缩放*/
/*4.扭曲*//*兼容性同 平移*/
transform:skew(30deg, 30deg); /*第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。*/
}