1.使用简单易于学习

如图片所示（这里以网上书城系统为例），当鼠标滑过书本（中间书）时书的图片放大，并且会从左边滑过标签显示书目的价格简介，作者等信息当鼠标移开就恢复原状。（如图左右两边的为初始状态，中间的为鼠标滑过的状态）

2.熟练掌握transform的基本属性及其用法

figure标签：用于规定獨立的内容好比一个容器，用来存放图像图表，照片等

transform：用于元素的变形处理（例如：放大缩小，旋转等）原理：通过改变元素的位置参数来html实现动图效果元素的变形

transition：用于元素过渡动画处理。（通过参数设置控制动画时间延迟等）

HTML的基本部署在此不多讲。

如果想要使得页面分布合理些可以建立table标签将页面分为几个模块，每个模块存放一个元素（这里以书本代替）在此直接编写figure代码

接下来写CSS 偅点！

（以上属性根据我的页面来设置，可以参照根据实际情况更改）

对P标签进行设置，通过transform来html实现动图效果P标签的动画（P标签从屏幕嘚左边-180px的位置开始移入（-代表左））

此代码代表：hover鼠标经过html实现动图效果动画（标签移动到0px处，及由-180px到0px）

标签从-180px滑到0px的时间延迟

接下来朂后一步html实现动图效果图片的放大还原，给img设置属性当hover时，调用transform：scale（1.51.5），表示图片的长宽扩大1.5倍（根据实际调整）

通过此篇教程，可以学习到用单纯的CSS3html实现动图效果图片的放大缩小标签的移动。如果用JS去html实现动图效果也可以但是代码量更大，设置更复杂用此種方法更为简便。同时还可以更改transform属性放大缩小是通过scale来html实现动图效果，也可以用rotatehtml实现动图效果当鼠标经过html实现动图效果图片的旋转等做出更绚丽的效果。