06 下面实现hover的效果，在代码中设置背景的位置发生移动。
由于背景图大于框的尺寸大小，因此默认情况下只会显示左侧的部分，当设置hover效果后，背景图随鼠标而移动。
07 设置动画的过渡效果。在my01的样式中加入transition。
代码中的第15行代码表示所有变化的属性产生过渡，时长为0.3s，速度为匀速，效果延时为0。第13行与第14行代码可以删除，在大多数浏览器中均可正常显示。但是为了使代码在谷歌和欧朋浏览器中能正常工作，故而复制两行代码并添加前缀-webkit和-o。
08 保存后按F12键在浏览器中查看过渡效果。
09 将<style>标签内的样式装修到“自定义CSS”区域中，将<body>标签内的代码装修到“自定义内容区”模块。
平移、旋转与缩放
要产生变形效果就需要用到transform样式，它可以设置偏移、旋转、缩放和扭曲变形。
1．平移
当光标放置在图片上时，图片会水平或垂直移动，以显示被隐藏的部分。前面讲到，平移的效果用transition可以实现，本节将介绍如何使用transform样式实现该效果。
01 在Dreamweaver软件中建立框架，并在框内插入图片（素材\第7章\7.5.3平移、旋转与缩放），定义框内图片的样式名。
02 设置框的样式，为框设置高度、宽度和超出隐藏。
